Is there a way in Vis.js to keep nodes at the same size while zooming in/out?

user_1228333 0
Viewed 28

I'm wondering whether there is or not a way to keep the size of nodes, in a Vis.js network, always at the same size while zooming in/out

I the Options

{
  size: 10,
  scaling: {
    min: 10,
    max: 10
  }
}

but this setting doesn't work at all, I also tried with

customScalingFunction: function (min,max,total,value) {
    return 1;
}

thinking that this function would run any time there is a re-rendering of the network.

visnetwork vis.js
1 Answers

This can be achieved by changing the nodes.size and nodes.font.size options when the network is zoomed. Details on these options can be found in the documentation here and details on the zoom event here. As per the documentation the nodes.size option is only applicable to shapes which do not have the label inside of them.

Example snippet adjusting the size on zoom:

// create an array with nodes
let nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

// create an array with edges
let edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 },
]);

// create a network
const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges,
};
let options = {
  nodes: {
    shape: 'dot',
    size: 10,
    font: {
      size: 10
    }
  }
};
const network = new vis.Network(container, data, options);

// Set the initial node size once before network is drawn
network.once("beforeDrawing", function() {
   setNodeSize(network.getScale());
}); 

// Adjust size on zoom
network.on("zoom", function (params) {
  setNodeSize(params.scale);
});

function setNodeSize(scale){
  // Update node size dependent on scale
  options.nodes.size = (10 / scale);
  options.nodes.font.size = (10 / scale);
  network.setOptions(options);
}
#mynetwork {
  width: 600px;
  height: 160px;
  border: 1px solid lightgray;
}
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>

Regarding the scaling options, I don't believe they can be used to achieve this. Scaling is relative to other nodes on the network, not the viewport / zoom. A quick example to illustrate changing the scaling value is https://jsfiddle.net/34b682qs/. Clicking on the button toggles the scaling value set for each node in sequence between 10 and 20. When all nodes have the same value the network scales them all to be the same size regardless of if that value is 10 or 20. Therefore adjusting this value on zoom would have no effect.

user_16204490
Related