Modify the style for a specific node selected in the network for vis.js
Question
Is there a way to change the node size for the selected node without changing the size for all nodes in the options ?
These are my node options:
nodes: {
borderWidth: 1,
borderWidthSelected: 2,
physics: true,
color: {
border: '#000000',
background: '#ffffff',
highlight: {
border: '#000000',
background: '#B9B9BF'
}
},
shadow: {
enabled: false,
color: '#C11818',
size: 10,
x: 5,
y: 5
},
shape: 'circularImage',
mass: 2,
size: 25
}
I want to enlarge the selected node so it is more visible than the others.
network.on("selectNode", function (params) {
var nodeId = params.nodes[0];
var node = nodes.get(nodeId);
nodeClick(nodeId, nodes, edges, network);
// var options= {
// nodes: {
// size: 40
// }
// };
// network.setOptions(options);
});
The commented part sets the size for all nodes rather than the one selected and the node object doesn't have any handle on the options either.
2 answers
solution1
4 2016-07-28 09:37:52
You can change the font-size of the selected node to increase its size:
var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]); var edges = new vis.DataSet([ {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5} ]); var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { interaction: { hover:true }, nodes: { font: { size: 14 }} }; var network = new vis.Network(container, data, options); network.on("selectNode", function (params) { var selectedNodeId = params.nodes[0]; var node = network.body.nodes[selectedNodeId]; node.setOptions({ font: { size: 20 } }); }); network.on("deselectNode", function (params) { var deselectedNodeId = params.previousSelection.nodes[0]; var node = network.body.nodes[deselectedNodeId]; node.setOptions({ font: { size: options.nodes.font.size } }); });
#mynetwork { width: 100%; height: 100%; border: 1px solid lightgray; }
<!DOCTYPE html> <html> <head> <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="mynetwork"></div> </body> </html>
solution2
2 ACCPTED 2016-09-14 11:31:24
if you have multiselect enabled, you can loop over params.nodes
for (id in params.nodes){
var node = network.body.nodes[params.nodes[id]];
...
}
(deselect respectivly)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.