javascript - 在 D3 树可视化中过渡节点圆圈颜色

Question

我遇到一个问题，当我折叠节点时，其他节点的描边颜色也会改变(当它们不应该改变时)。提示似乎是折叠的树分支的颜色“向下”移动到较低分支中的节点。

您可以通过单击“节点 1”来查看问题。结果是节点 2 和 3 的颜色向下移动到 4 和 5。4 和 5 移动到 6 和 7，等等。

有趣的是，你重新选择“节点1”展开分支，所有的颜色都恢复到原来的正确状态。

注意:可以在以下位置查看树可视化和源代码:http://bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85/

我在三个代码块中处理与节点相关的“圆圈”元素:

第 1 block :

      nodeEnter.append("svg:circle")
          .attr("cx", horizontalTreeOffset)
          .attr("r", 1e-6)
          .style("fill", function(d) { return d._children ? "lightsteelblue"
                                       : "#fff"; });

第 2 block :

      nodeUpdate.select("circle")
          .attr("r", 5.5)
          .style("stroke", function(d) { return color_hash[d.type]; })
          .style("stroke-width", 3)
          .style("fill", function(d) { 
            if(d._children)
              { return color_hash[d.type]; }
            else
              { return "white"; }
            }
          )
          .attr("type_value", function(d, i) { return d.type; })
          .attr("color_value", function(d, i) { return color_hash[d.type]; });

block #3:

      nodeExit.select("circle")
          .attr("r", 1e-6);

非常感谢您提供的任何帮助。

Answer 1

找到了...

tree.nodes() 方法遍历链接并产生自己的节点集。这与用户传递给程序的节点列表完全不同，后者包含每个节点的所有特征。因此，必须从原始节点集中获取原始特征，并合并到 D3 生成的节点(缺少特征)中。

当代码为每个转换进入 update() 方法时，旧代码会遍历节点并根据它们的索引进行合并。但是，由于节点总数减少(因为节点折叠)，索引现在“移动”了。并且，转换后的节点已经完成了为其分配特征的过程，因此没有理由再次这样做。

要合并的新代码如下所示...

      // Normalize for fixed-depth.
      //nodes.forEach(function(d) { d.y = d.depth * 180; });
      if(!nodes[0].name){
        nodes.forEach(function(d, i){
          d.y = d.depth * 180;
          d.name = nodeSet[i].name
          d.type = nodeSet[i].type
          d.hlink = nodeSet[i].hlink
          d.rSize = nodeSet[i].rSize
        })
      }
      else{
        nodes.forEach(function(d, i){
          d.y = d.depth * 180;
        })
      };