javascript - 如何最初仅扩展此 d3.js 中选定的 Node ？

Question

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

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

但我想通过传入 JSON 数组来修改它，如下所示:

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

如果expandedNodes为空，我希望树从它已经存在的位置开始(仅扩展根 Node )。

如果expandedNodes非空，我希望树开始时仅包含出现在expandededNodes中的展开 Node (在此示例中，如下图所示)

我该怎么做？

你可以假设

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

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