为 vis.js 网络中选定的特定节点修改样式

Question

有没有办法在不更改选项中所有节点的大小的情况下更改所选节点的节点大小？

这些是我的节点选项：

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);
});

注释部分设置了所有节点的大小，而不是所选节点的大小，并且节点对象也没有任何选项句柄。

Answer 1

您可以更改所选节点的字体大小以增加其大小：

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>

Answer 2

如果你启用了多选，你可以循环 params.nodes

for (id in params.nodes){
    var node = network.body.nodes[params.nodes[id]];
    ...
}

（分别取消选择）

为 vis.js 网络中选定的特定节点修改样式

Modify the style for a specific node selected in the network for vis.js

javascript

vis.js