Question

我正在尝试选择my tree的分支，并为每个（父级和两级子级）分配唯一的颜色。在下面的示例图片中，右侧是父节点，左侧是叶节点。

我的分层数据有三个级别（名称：＆＃34;专业＆＃34;＆gt;＆gt;名称：＆＃34;位置＆＃34;＆gt;＆gt; LeafNode包含＆＃34;提供商＆＃34;，＆＃34;位置＆＃34;，＆＃34;专业＆＃34;）。我想我需要在绘制路径时检查每个LeafNode对象 -

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?
                })

enter image description here

Answer 1

使用从树形布局和代码生成的数据结构，您可以使用一些if else语句实现您的目标。你可以使用三元运算符，但代码最终会非常简洁而且不那么明确。

反正。正如我上面所说，你首先需要设置一个色标，我已经用

完成了

d3.scale.category10()

然后，您需要计算色阶域的唯一分类变量，这可以针对他Speciality变量进行。 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文件中删除链接类的笔触属性。

哦，这不会为每个类别带来独特的颜色;它重复了规模中的10种颜色。这对您的应用程序可能没问题，否则在d3中可以轻松完成设置色标以获得唯一值。

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

1 个答案: