d3.js - 如何为 d3 径向树指定节点颜色？

Question

我正在试验此处找到的径向树的 d3 代码:https://bl.ocks.org/mbostock/4063550

我想使前 10 个子节点的链接(以及它们连接到的相应节点)的颜色不同。例如，所有来自“animate”的链接和节点都是红色的，“data”是橙色的，“display”是黄色的，等等。

我对此很陌生，所以如果我没有很好地解释这一点，我深表歉意。

到目前为止我尝试的是在此部分下添加代码:

node.append("circle")
.attr("r", 2.5);

我只是猜测如何为特定节点指定颜色，不用说它没有用。

感谢您的帮助!

Answer 1

使用您在问题中提供的示例，您可以为节点着色，如下所示:

  node.append("circle")
      .attr("r", 2.5)
      .style("fill", function(d) { 
        if (d.id.startsWith("flare.animate")){
          return "orange";
        }
        if (d.id.startsWith("flare.vis")){
          return "red";
        }
        if (d.id.startsWith("flare.util")){
          return "blue";
        }
        if (d.id.startsWith("flare.scale")){
          return "maroon";
        }
        if (d.id.startsWith("flare.query")){
          return "limegreen";
        }
        if (d.id.startsWith("flare.physics")){
          return "deeppink";
        }
        if (d.id.startsWith("flare.flex")){
          return "coral";
        }
        if (d.id.startsWith("flare.display")){
          return "purple";
        }
        if (d.id.startsWith("flare.data")){
          return "cyan";
        }

      });

工作代码here