如何从 d3js 中折叠的所有节点开始？

Posted 2023-03-31

【中文标题】如何从 d3js 中折叠的所有节点开始？

【英文标题】：How can I start with all the nodes collapsed in d3js?

【发布时间】：2012-07-25 10:24:37

【问题描述】：

从这个例子开始http://bl.ocks.org/1062288 我想要一棵所有节点都折叠的树，所以初始图应该只包含一个节点（根）。

【参考方案1】：

选项 1：修改 JSON

修改 JSON 文件 readme.json，以使用 _children 而不是 children。

选项 2：编辑 Javascript

编辑 javascript 以切换每个节点的 _children 和 children 属性。可以这样做

var nodes = flatten(root);
nodes.forEach(function(d) 
  d._children = d.children;
  d.children = null;
);

这是第二个选项的JSFiddle。

【讨论】：

Brant 你知道导航所有节点并将它们设置为打开的方法吗？您的回答告诉我 _children 已关闭，children 已打开。我想单击一下，甚至可以切换树完全打开/关闭。蒂亚jsfiddle.net/chrisloughnane/vV3Sc

嘿@BrantOlsen 我有一个问题。我不想将所有节点都放在一个 json 中。我宁愿先加载一个根，然后当我单击时加载另一个 json，然后以某种方式创建与其父级的链接。你能告诉我如何做到这一点吗？谢谢

@user414209 你应该把它放到一个新问题中，这样所有人都可以看到它。

@BrantOlsen 我尝试了选项 1，得到了一些奇怪的结果，源节点消失了，但选项 2 效果很好。我更新了您的小提琴以修复损坏的链接：jsfiddle.net/headwinds/Ge58Q

【参考方案2】：

var allnode =  flatten(root);
for (var i=0;i<allnode.length;i++)click(allnode[i])

对于那些仍在寻找它的人，这里有 2 行代码。简洁易懂。

【讨论】：

不错的补充 - 我将它与这个很棒的示例代码库一起使用 - is.kau.se/julioangulo/angulo/blog/?p=157568737 - 以获得完全折叠而不是完全展开的预期效果，这对我来说是压倒性的 - 我宁愿探索树并最终到达那里。

【参考方案3】：

把它放在这里供未来的读者阅读：

d3.json("json/results.json", function(json) 
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
    function toggleAll(d) 
    if (d.children) 
      d.children.forEach(toggleAll);
      toggle(d);
    


root.children.forEach(toggleAll);

toggle(root);
update(root);
);

http://jsfiddle.net/chrisloughnane/vV3Sc/