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

Answer 2

扩展到其他数据集的解决方案将是递归函数，例如

http://blockbuilder.org/tomshanley/f73a13c5b5981fe97e6bf4dad1f52238

相关代码：

let colour = d3.scaleOrdinal(d3.schemeCategory20)

function findColour(d) {

  let c = "";

    if (d.depth == 0 || d.depth == 1) {
        c = colour(d.id);
    }
    else {
        c = findColour(d.parent);
    }

  return c;

}

  node.append("circle")
      .attr("r", 2.5)
      .style("fill", findColour)

Answer 3

你走在正确的轨道上。附加时添加颜色属性界

 node.append("circle")
 .attr("r", 2.5)
 .style("fill", function(d) { color = "black"; 
 // your color logic based on property of d
 if(d.name == "animate") color = "red";
 if(d.name == "data") color = "orange";
 .
 .
 return color});

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

3 个答案: