为vis.js修改网络中选择的特定节点的样式
[英]Modify the style for a specific node selected in the network for vis.js
问题描述
有没有办法更改所选节点的节点大小而不更改选项中所有节点的大小？
这些是我的节点选项：
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
}
我想放大选定的节点，使其比其他节点更明显。
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);
});
注释部分设置所有节点的大小，而不是所选节点的大小，节点对象也没有任何选项处理。
2 个解决方案
解决方案1
4 2016-07-28 09:37:52
您可以更改所选节点的字体大小以增加其大小：
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
如果启用了多选，则可以循环遍历 params.nodes
for (id in params.nodes){
var node = network.body.nodes[params.nodes[id]];
...
}
（分别取消选择）
无法获取vis.js的最后一个或第一个选定的网络节点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.