如何为d3径向树指定节点颜色? [英] How do you specify node colors for the d3 radial tree?

问题描述

我正在尝试在此处找到放射状树的d3代码: https://bl.ocks .org/mbostock/4063550

I am experimenting with the d3 code for the radial tree found here: https://bl.ocks.org/mbostock/4063550

我想这样做，以使从前10个子节点开始的链接(及其连接到的相应节点)具有不同的颜色.例如，所有来自动画"的链接和节点将是红色，数据"是橙色，显示"是黄色，依此类推.

I'd like to make it so that the links leading from (and the corresponding nodes they connect to) of the first 10 child nodes are different colors. For example, all links and nodes coming from "animate" would be red, "data" orange, "display" yellow, and so on.

我对此是陌生的，所以如果我不能很好地解释这一点，我深表歉意.

I'm brand new to this, so I apologize if I didn't explain this very well.

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

What I tried so far was adding code under this section:

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

我只是在猜测如何为特定节点指定颜色，而不必说这是行不通的.

I sort of just guessed how to designate a color to a specific node, and needless to say it didn't work.

感谢您的帮助！

推荐答案

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

Using the sample you provided in the question you can color the nodes like below:

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

      });

工作代码此处

这篇关于如何为d3径向树指定节点颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！