Vis.js:单击时修改节点属性

Question

我在Vis.js中有一个无向图，我想在选择某个节点时更改相邻节点的颜色和大小(根据JS数组中的值对它们进行缩放)。我该怎么做呢？除了the source for this example之外，有关vis.js网络对象的文档毫无启发性。

Answer 1

您可以侦听单击事件，以了解用户何时单击节点。

network.on("click", function (params) {
  console.log(params);
});

如果您已经在DataSet中创建了节点，您只需简单地更新它们，网络将相应地自动更新：

nodes.update({id: 4, label: "changed label"});

Answer 2

详细阐述了针对this问题的this回答。vis.js->Network documentation包含所有细节，您只需将它们按顺序排列即可。

您可以使用网络实例的on方法来监听事件。请参阅上面的链接中的“方法引用->全局”。这个"on“方法有两个输入。第一个是要侦听的事件；第二个是指定事件发生时要采取的操作的函数。

要了解如何使用此信息，请参阅上面文档链接中的“事件”部分。对于单击事件，您的代码将如下所示

network.on("click", function (params) {
  console.log(params);
});

第一个参数始终是一个字符串；在本例中，我们对"click“事件感兴趣。第二个参数是一个回调函数，它只接受一个参数(在上面的示例中，我将这个参数称为"params“)。"Events“文档(同样，请参见上面的链接)为您总结了此结构。具体地说，如果单击事件与节点相关联，则单击的节点的ID可以作为params.nodes进行访问。

回到原来的问题。要更改相邻节点的颜色，首先需要一个相邻节点的数组。您可以使用"getConnectedNodes“方法(参见上面链接中的"Method Reference ->信息”)来完成此操作。这将为您提供一个节点ID数组。接下来，对于该数组中的每个ID，您需要更新您希望更改的属性。

更新节点属性的最简单方法是使用DataSet创建节点。你可能已经在这么做了。请参阅this示例，并注意以下代码行

var nodes = new vis.DataSet([...]);

此nodes变量有自己的update方法。因此，如果您具有(例如)保存您希望修改的节点的节点ID的变量CurrentID，并且您希望(例如)将该节点的标签更改为存储在另一个变量newLabel中的文本字符串，您将这样做

nodes.update({id:CurrentID, label:newLabel});

Answer 3

非常感谢您的这些有用的回复；其中一个问题是，如果使用Network documentation examples，则可能已经在创建自己的数据集的断言可能是错误的，这些示例主要执行以下操作：

var nodeArr = [...];
var edgeArr = [...];
data = {nodeArr, edgeArr}
network = new vis.Network(container, data, options); 

仅当节点是Dateset而不是数组时，更新功能才可用：

var nodeArr = [...];
var edgeArr = [...];
data = {new vis.DataSet(nodeArr), new vis.DataSet(edgeArr)}
network = new vis.Network(container, data, options);