d3.js Sankey图：矩形填充颜色 [英] d3.js Sankey diagram: rectangles fill color

问题描述

所以我在玩d3.js Sankey图。

在此示例（上图）使用

定义颜色

  var color = d3.scale.category20 ）; 
  

对于每个节点都有一个矩形，该矩形通过改变样式填充：

  .style（fill，function（d）{
 return d.color = color（d.name.replace /。* /，））; 
}）
  

关于使用自定义颜色的建议。如果我想只使用6种颜色，但是基于.json文件中的值选择节点矩形颜色。

例如，我想说明我想在NFL中显示一个简单的团队图表。颜色每个代表团队所在的部门。因此，如果他们移动到不同的部门，颜色改变。并且节点是为每个季节创建的。

这样可以运行

  node.append（rect）
 .attr（height，function（d）{return d.dy;}）
 .attr（width，sankey.nodeWidth b $ b .style（fill，function（d）{
 return d.color = color（d.name.replace（/。* /，））; 
}）
 .style（stroke，function（d）{
 return d3.rgb（d.color）.darker（2）; 
}）
 .append 
 .text（function（d）{return d.name +\\\
+ format（d.value）;}）; 
  

使用基于json文件中的值的颜色？我想只是一个if语句，但有更容易的方法吗？

解决方案

听起来像你想在JSON中包含颜色案件。您可以以浏览器识别的任何方式添加，例如作为名称（白色）或十六进制（#fff）。有关支持的颜色规范的完整列表，请参见 SVG规范。 p>

So I am playing around with the d3.js Sankey diagram.

In this example (pictured above) color is defined using

var color = d3.scale.category20();

For each node there is a rectangle, and that rectangle is filled by altering the style:

.style("fill", function(d) {
    return d.color = color(d.name.replace(/ .*/, ""));
})

I'm looking for suggestions on using custom colors. If I wanted to use only say 6 colors, but have the node rectangle colors chosen based on a value in the .json file.

For example, lets say I wanted to show a snakey chart of teams in the NFL. The colours each represent which division the teams play in. So if they move to a different division, the color changes. And the nodes are created for every season. Something along those lines.

So is it possible to run the

node.append("rect")
    .attr("height", function(d) { return d.dy; })
    .attr("width", sankey.nodeWidth())
    .style("fill", function(d) {
        return d.color = color(d.name.replace(/ .*/, ""));
    })
    .style("stroke", function(d) {
        return d3.rgb(d.color).darker(2);
    })
   .append("title")
    .text(function(d) { return d.name + "\n" + format(d.value); });

with the color based on a value in the json file? I am thinking just an if statement, but is there an easier way? Could I just include the hex color code in the json?

解决方案

Sounds like you want to include the colour in the JSON in this case. You can include it in any way that the browser recognises, e.g. as a name ("white") or hex ("#fff"). See the SVG spec for a full list of supported colour specifications.

这篇关于d3.js Sankey图：矩形填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！