為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.