vis.js:如何用鼠标点击来展开/折叠节点

vis.js: How to expand/collapse nodes with mouse click

本文关键字：节点 折叠 js 何用 鼠标 vis      更新时间：2024-01-06

刚刚玩了一天vis.js，并浏览了所有的文档和示例。我正试图找出用点击事件刷新节点和边缘数据的最佳方法。例如，假设我有一个没有边的节点，然后我单击它添加3个子节点。一位vis.js专家能提出最好的方法吗？

预期之前：

nodes = [{id: 1,   label:"Parent Node"} ];
edges = [ ];

点击id 1:后预期

nodes = [{id: 1,   label:"Parent Node"},
{id: 2,   label:"Child Node1"},
{id: 3,   label:"Child Node2"},
{id: 4,   label:"Child Node3"} ];
edges = [ {from: 1, to: 2},
          {from: 1, to: 3},
          {from: 1, to: 4} ];

然后我想折叠并返回到没有子节点的父节点。我知道如何处理事件，这是我不确定的节点和边的更新和重绘。

发布后，我发现了自己的错误，没有使用动态DataSet（）。所以应该是这样的：

var nodes = new vis.DataSet([{id: 1,   label:"Parent Node"}]);
var edges = new vis.DataSet([]);

然后你可以这样更新：

nodes.update({id: 2,   label:"Child Node1"});
nodes.update({id: 3,   label:"Child Node2"});
nodes.update({id: 4,   label:"Child Node3"});
edges.update({from: 1, to: 2});
edges.update({from: 1, to: 3});
edges.update({from: 1, to: 4});
相关文章：