d3.js 树 - 为父母和他们的孩子分配独特的颜色答案

【问题标题】：d3.js Tree - Assign unique color to parents and their childrend3.js 树 - 为父母和他们的孩子分配独特的颜色
【发布时间】：2014-10-03 21:52:43
【问题描述】：

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

我的分层数据是三层深度（名称：“Specialty”>>名称：“Location”>>包含“Provider”，“Location”，“Specialty”的LeafNode）。我想我需要在绘制路径时检查每个 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?
                })

【问题讨论】：

在您的 json 生成函数中添加一个类别变量以及名称变量。完成后，只需将一些颜色映射到笔画即可。因此，您必须设置一个名为 colours 的色标，然后在链接生成器中添加类似的内容； attr.("stroke", function(d,i) { return colours(d.source.category); })

标签： d3.js colors tree unique edges

【解决方案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 文件中删除链接类的 stroke 属性。

哦，这不会为每个类别提供唯一的颜色；它会重复刻度中的 10 种颜色。这对您的应用程序来说可能没问题，否则在 d3 中很容易设置色标以提供唯一值。

【讨论】：