d3 强制可折叠布局 - 折叠所有节点的起始页面答案

【问题标题】：d3 force collapsible layout - start page with all nodes collapsedd3 强制可折叠布局 - 折叠所有节点的起始页面
【发布时间】：2013-08-06 16:33:20
【问题描述】：

我只需要对此处可用的布局进行简单修改 http://mbostock.github.io/d3/talk/20111116/force-collapsible.html

上述可视化从展开所有节点开始，因此用户可以可视化完整的层次结构。唯一的问题是，如果图是稠密的，形成的毛团是没有意义的。

我有兴趣从根节点开始，然后根据需要逐渐扩展所有节点。可行吗？需要修改多少代码？

【问题讨论】：

您可以通过遍历所有节点并在它们上调用click 函数来破解它。或者在 json 文件中，用“_children”查找/替换“children”。
将带有“children”的 json 文件修改为“_children”无效。不确定您将在哪里实现循环以在所有节点上实现点击功能。你有一个示例脚本可以与mbostock.github.io/d3/talk/20111116/force-collapsible.html页面一起使用

标签： javascript d3.js force-layout

【解决方案1】：

我发现可行的方法是在所有子节点上调用 click 函数。您可以通过在上面提供的示例中插入以下两行来完成此操作（将这两行插入到 d3.json 调用正下方靠近脚本开头的调用“update”的末尾）

d3.json("flare.json", function(json) {
  root = json;
  root.fixed = true;
  root.x = w / 2;
  root.y = h / 2 - 80;
  update();
});

//new code
var collapseMe = flatten(root);
for(var j = 0; j< collapseMe.length; j++){click(collapseMe[j])};

【讨论】：

【解决方案2】：

       just do it like this 
        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);
                 });

【讨论】：

你也可以发表一些解释吗？