d3.js树 - 为父母及其子女分配独特的颜色

Question

我正在尝试选择树的一个分支，并为每个分支（父级和两个级别的子项）分配一种独特的颜色。在下面的示例图片中，父节点位于右侧，叶节点位于左侧。

我的分层数据有三层(名称:“专业”

d.source.children.children.children.Specialty == d.source.children.name

但是不能把这些放在一起让它工作。当我绘制路径时，我如何为每个分支分配一种独特的颜色？

var link = canvas.selectAll(".link")
            .data(links)
            .enter().append("path")
            .attr("d", diagonal)
            .attr("stroke-width", 1)
            .attr("fill", "none")
            .attr("stroke", function(d){
                return  color(d.target.name == d.target.name ? d : "#111" ); //<< huh?
                })

Answer 1

使用从树形布局生成的数据结构和您的代码，您可以通过一些< code>if else语句实现您所追求的目标；您也许可以使用三元运算符，但是代码会变得非常简洁并且不清晰。

总之。正如我上面所说的，你首先需要设置一个色阶，我已经用它完成了

d3.scale.category代码

然后，您需要计算色阶域的唯一分类变量，这可以对专业变量完成。d3.set 可以为您执行此操作，但首先您需要获取 Speciality 变量的数组。

var categoryArray = [];

csv.forEach(function(d,i) {
    categoryArray[i] = d.Specialty;
});

colourDomain = d3.set(categoryArray)
    .values();

将独特的特色系列传递到色阶

colours.domain(colourDomain);

现在，您需要做的就是设置匿名函数来设置路径笔画的颜色。这非常简单，我承认并不优雅。您的link变量将变为：

var link = canvas.selectAll(".link")
            .data(links)
            .enter().append("path")
            .attr("class", "link")
            .attr("stroke", function(d,i) { 
                if (d.source.depth === 1) {
                    return colours(d.source.name);
                } else if (d.source.depth === 2) {
                    return colours(d.source.parent.name);
                } else if (d.source.depth === 3) {
                    return colours(d.source.Specialty);
                } else {
                    return "white";
                }
            })
            .attr("d", diagonal);

不要忘记从css文件中删除链接类的stroke属性。

哦，这不会给你一个独特的颜色为每个类别；它重复音阶中的10种颜色。这对于您的应用程序来说可能没问题，否则在d3中很容易设置一个色标来给出您唯一的值。