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

Question

我在Vis.js中有一个无向图，我想在选择某个节点时更改相邻节点的颜色和大小（根据JS数组中的值进行缩放）。我该如何实现这个功能？vis.js网络对象的文档除了这个示例的源代码之外没有提供有启发性的信息。

- manglano

Answer 1

您可以监听点击事件来知道用户何时单击了节点。

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

如果您在 DataSet 中创建了节点，您可以简单地更新它们，Network 将自动更新相应的内容:

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

- Jos de Jong

---

Jos，请您详细说明一下这个解决方案好吗？具体来说，当您记录参数时，会返回很多信息。您能否添加额外的代码以选择被点击节点的ID呢？ - clone45

Answer 2

针对这个问题，进一步解释此答案。所有详情都已在vis.js->Network文档中详细说明，你只需按顺序执行即可。

使用网络实例的“on”方法监听事件，请参阅上面链接中的“Method Reference -> Global”部分。该“on”方法有两个参数。第一个参数是要监听的事件，第二个参数是指定事件发生时要执行的操作的函数。

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

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

第一个参数总是一个字符串，这里我们对“click”事件感兴趣。第二个参数是一个回调函数，它接受一个参数（在上面的示例中，我将该参数称为“params”）。 “Events”文档（同样，请参见上面的链接）为您概括了此结构。具体而言，如果点击事件与节点关联，则被单击的节点的ID可以通过params.nodes [0]访问。

回到原始问题。要更改相邻节点的颜色，首先需要获取相邻节点的数组。您可以使用“getConnectedNodes”方法来实现此目的（请参见上面的“Method Reference-> Information”链接）。这将给您一个节点ID数组。接下来，对于该数组中的每个ID，您需要更新您想要更改的属性。

更新节点属性的最简单方法是使用DataSet创建节点。您可能已经在这样做了。请参见此示例，并注意以下行

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

这个 nodes 的变量有自己的 update 方法。因此，如果你有一个变量 CurrentID ，它持有你想要修改的节点的节点 ID，并且你想要将该节点的标签更改为存储在另一个变量 newLabel 中的文本字符串，那么你可以这样做：

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

- Clay

Answer 3

非常感谢这些有用的回复；其中一个陷阱是，如果使用网络文档示例，则可能已经创建自己的数据集的断言很可能是错误的，因为大多数情况下会执行以下操作：

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

更新函数仅适用于节点是 数据集 而不是数组：

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

- user1318390