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

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

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

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

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

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

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

Answer 3

非常感谢这些有用的回复；陷阱之一是，如果使用网络文档示例，则断言一个人可能已经在创建自己的数据集的说法很可能是错误的，

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

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

3 个答案: