如何最初只展开此 d3.js 中选定的节点？

Question

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

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

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

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

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

如果 expandedNodes 是非空的，我希望树开始时只扩展出现在 expandededNodes 中的那些节点（在本例中如下图所示）

我该怎么做？

你可以假设

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

Answer 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

如何最初只展开此 d3.js 中选定的节点？

How to initially make only selected nodes in this d3.js expanded?

javascript

tree

json

node.js

d3.js