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

Question

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

Answer 1

非常感谢这些有用的回复；问题之一是，如果使用 Network 文档示例，断言可能已经创建自己的数据集可能是错误的，这些示例大多执行以下操作：

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

Answer 2

详细说明this 回答this 问题。 vis.js->Network documentation 包含所有详细信息，您只需将它们按顺序排列即可。

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

要了解如何使用此信息，请参阅上述文档链接中的“事件”部分。对于点击事件，您的代码将类似于

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

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

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

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

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

这个nodes 变量有自己的update 方法。因此，如果您有（例如）一个变量 CurrentID 保存您要修改的节点的节点 ID，并且您想（例如）将该节点的标签更改为存储在另一个变量 @987654330 中的文本字符串@，你会的

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

Answer 3

您可以通过监听点击事件来了解用户何时点击了某个节点。

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

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

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