JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<button id="changeNodeButton">Change Node Scale Value</button>
<span id="changeNodeLabel"></span>
<div id="mynetwork"></div>
CSS
#mynetwork {
width: 600px;
height: 300px;
border: 1px solid lightgray;
}
JavaScript
// create an array with nodes
let nodes = new vis.DataSet([
{ id: 1, value: 10, label: "Node 1 (10)" },
{ id: 2, value: 10, label: "Node 2 (10)" },
{ id: 3, value: 10, label: "Node 3 (10)" },
{ id: 4, value: 10, label: "Node 4 (10)" },
{ id: 5, value: 10, label: "Node 5 (10)" },
]);
// 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,
};
const options = {
nodes: {
shape: 'dot'
}
};
const network = new vis.Network(container, data, options);
// Test adjusting the scale node by node
// Quick test method, assumes consistent IDs in nodes DataSet
let nodeToChange = 1;
const btn = document.getElementById('changeNodeButton');
const lbl = document.getElementById('changeNodeLabel');
// On click adjust the value of the node so it scales
btn.addEventListener('click', function(){
// Get the node to change
let node = nodes.get(nodeToChange);
// Determine the new value (toggled between 10 and 20)
let newValue = node.value === 10 ? 20 : 10;
// Update the node in the nodes DataSet
nodes.update({id: node.id, value: newValue, label: "Node " + node.id + " (" + newValue + ")"})
// Update text label
lbl.textContent = "Changed node " + nodeToChange + " to value " + newValue;
// increment to next node
nodeToChange += 1;
if(nodeToChange > nodes.length){
// Reached end of nodes DataSet, reset to 1
nodeToChange = 1;
}
});