Javascript D3树可视化中节点圆颜色的转换

我有一个问题，当我折叠节点时，其他节点的笔划颜色也会改变（当它们不应该改变时）。提示似乎是正在折叠的树枝的颜色会“向下”移动到较低树枝中的节点

单击“节点1”可以看到问题。结果是节点2和3的颜色向下移动到4和5。4、5档换6、7档等

有趣的是，重新选择“节点1”以展开分支，所有颜色都会返回到其原始和正确的状态

注：树可视化和源可在以下位置查看：

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

块#1:

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

      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]; });

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

块#2:

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

      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]; });

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

块#3:

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

      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]; });

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

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

找到了

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;
        })
      };

---

只是一个快速的健全性检查：一个分支中的给定节点（例如节点4）正在根据另一个分支中的节点（例如节点1和节点2）的折叠而更改其type_值属性。这是故意的吗？不，不是故意的。这听起来像是一个问题，因为颜色与类型有关，因此，如果类型在变化，那么颜色也在变化也是有意义的。我可以问一下你在哪里看到这个，因为我似乎无法在调试器中捕获它吗？是的，这就是为什么我问…颜色与类型关联。我在使用Chrome的开发工具时看到了这一点，在折叠节点1和2的同时（右键单击）检查元素节点4。找到了！它位于完全不同的代码块中，因为我必须执行一个丑陋的合并循环（因为API没有为您执行合并）。我会把它放在答案部分。