如何最初仅扩展此 d3.js 中的选定节点？答案

【问题标题】：How to initially make only selected nodes in this d3.js expanded?如何最初仅扩展此 d3.js 中的选定节点？
【发布时间】：2016-05-27 05:46:52
【问题描述】：

我正在试验和修改 d3.js 的 this 示例以基于 JSON 结构绘制树。

这棵树开始时根节点展开，所有其他节点都收缩。

但我想通过传入此处示例的 JSON 数组来修改它：

expandedNodes = ["analytics", "flare", "graph", "scale"]

如果expandedNodes 为空，我希望树从它已经存在的位置开始（仅扩展根节点）。

如果expandedNodes 不为空，我希望树开始时仅扩展出现在expandededNodes 中的那些节点（在此示例中如下图所示）

我该怎么做？

你可以假设

Cyril here 编写的findNode() 函数可用。
树中的所有节点都有唯一的名称
数组expandedNodes 是有效的，因此如果一个节点的名称出现在其中，那么它的所有祖先名称也会出现。

【问题讨论】：

标签： javascript json node.js d3.js tree

【解决方案1】：

你可以这样做：

  //array of expanded nodes
  expandedNodes = ["analytics", "flare", "graph", "scale"];
  function collapse(d) {
    if (d.children) {
      //if node present in expanded nodes array keep it open.
      if (expandedNodes.find(function(d1){ return d1 == d.name})){
        //expanded nodes children should be collapsed.
        d.children.forEach(collapse);
        return;
      }
      d.children.forEach(function(child){
        child.parent = d;
      });      
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

工作代码here

【讨论】：