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

Question

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

Answer 1

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

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

如果您已在DataSet中创建节点，则只需更新它们，Network就会自动更新：

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

第一个参数始终是一个字符串;在这种情况下，我们对“点击”事件感兴趣。第二个参数是一个回调函数，它接受一个参数（我在上面的例子中称这个参数为“params”）。 “事件”文档（再次参见上面的链接）总结了这个结构。具体来说，如果click事件与节点相关联，则单击的节点的ID可以作为params.nodes [0]访问。

回到原来的问题。要更改相邻节点的颜色，首先需要一个相邻节点的数组。您可以使用“getConnectedNodes”方法执行此操作（请参阅上面链接中的“方法参考 - >信息”）。这将为您提供一系列节点ID。接下来，对于该数组中的每个ID，您需要更新要更改的属性。

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

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

这个nodes变量有自己的update方法。因此，如果您有（例如）一个变量CurrentID，它包含您想要修改的节点的节点ID，并且您希望（例如）将该节点的标签更改为存储在另一个变量newLabel中的文本字符串，那么做

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