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

我试图选择my tree的一个分支并为每个（父级和两个级别的子级）分配唯一的颜色。在我下面的示例图片中，右侧的父节点和左侧的叶节点。（名称：“Specialty”>> name：“Location”>>包含“Provider”，“Location”，“Specialty”的LeafNode）。我想我需要检查每一个叶节点对象的路径绘制 -d3.js树 - 为父母及其子女指定独特的颜色

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

来源

2014-10-03 Colin

在你的json生成函数中添加一个类别变量以及名称变量。一旦你完成了这一切，只需将一些颜色映射到笔画即可。所以你必须设置一个称为“颜色”的色标，然后在链接生成器中添加类似的东西; （attr。（“stroke”，function（d，i）{return colours（d.source.category）;}）' – user1614080 2014-10-04 00:13:39

从树的布局和代码生成数据结构的工作，就可以实现你一些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中完成。

来源

2014-10-04 02:36:40 user1614080

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

回答

相关问题