Question

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

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

有趣的是，您重新选择“节点1”以展开分支，所有颜色都会恢复到原始状态。

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

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

BLOCK＃1：

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

BLOCK＃2：

      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（）方法时，旧代码将迭代遍历节点并根据其索引进行合并。但是，该指数现在已经转移了＃34;由于节点总数较少（因为节点崩溃）。并且，转换后的节点已经完成了将特征分配给它们的过程，因此没有理由再次这样做。

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

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

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

1 个答案: