d3 径向树高亮路径答案

【问题标题】：d3 radial tree highlight pathd3 径向树高亮路径
【发布时间】：2017-12-07 01:40:49
【问题描述】：

我只是有一个关于更改 Mike Bostock 的股票径向树笔画路径颜色的快速问题

https://bl.ocks.org/mbostock/4063550

例如，如果我可以更改子链接的颜色，例如：

var link = g.selectAll(".link")
    .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .style("fill", "none")
      .attr("d", function(d) {
        return "M" + project(d.x, d.y)
            + "C" + project(d.x, (d.y + d.parent.y) / 2)
            + " " + project(d.parent.x, (d.y + d.parent.y) / 2)
            + " " + project(d.parent.x, d.parent.y);
      });


    link.attr('stroke', function(d) {
       if (d.id.startsWith("Root.Item1")){
          return "#386eff";
        }

        if (d.id.startsWith("Root.Item2")){
          return "#45cbf2";
        }
        else return '#70f2ad';
        });

这将更改以 Root.Item2 开头的数据的所有链接颜色

即Root.Item2.Child1 和 Root.Item2.Child2

将具有相同的颜色。

但是，如果我只想突出显示 Root.Item2.Child2 的路径，而让其他链接保持相同颜色，该怎么办？

这个概念类似于突出以 Root 开始并以 Child2 结束的路径？

谢谢

【问题讨论】：

数据对象d 应该包含一个source 属性，该属性具有depth 属性。您可以使用它有条件地突出显示任何深度。

标签： javascript d3.js

【解决方案1】：

我能够通过检查节点的 d.children 以迂回的方式解决这个问题。不确定它是否理想，但如果其他人想做类似的事情，它会起作用。

if (d.id.startsWith("Root.Item2")) {
                for (var i = 0; i < d.children.length; i++ ) {
                    if (d.id.startsWith("Root.Item2.Child1") |
                    ) {
                        return "red";
                    }
                }

【讨论】：