为vis.js修改网络中选择的特定节点的样式
[英]Modify the style for a specific node selected in the network for vis.js
问题描述
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 个解决方案
解决方案1
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>
解决方案2
2 已采纳 2016-09-14 11:31:24
if you have multiselect enabled, you can loop over params.nodes如果启用了多选，则可以循环遍历 params.nodes
for (id in params.nodes){
var node = network.body.nodes[params.nodes[id]];
...
}
(deselect respectivly) （分别取消选择）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.