d3.js Sankey图：矩形填充颜色

Question

所以我正在玩d3.js Sankey图。

在this example（如上图所示）中，使用

定义颜色

var color = d3.scale.category20();

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

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

我正在寻找使用自定义颜色的建议。如果我只想使用6种颜色，但是根据.json文件中的值选择节点矩形颜色。

例如，假设我想在美国国家橄榄球联盟中展示一个有关球队的蛇形图表。颜色各自代表球队所在的分区。因此，如果他们移动到不同的分区，颜色会发生变化。并且每个季节都会创建节点。这些方面的东西。

所以可以运行

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

使用基于json文件中的值的颜色？我在想一个if语句，但有更简单的方法吗？我可以在json中包含十六进制颜色代码吗？

Answer 1

或者，您可以使用documentation中提到的d3序数标度明确地将颜色映射到除法。请参见底部的Colorbrewer。

var color = d3.scale.ordinal()
    .domain(["foo", "bar", "baz"])
    .range(["#fff","#000","#333"]);

然后

.attr("fill", function(d) { return color(d.division); });

Answer 2

在这种情况下，您希望将颜色包含在JSON中。您可以以浏览器识别的任何方式包含它，例如作为名称（“白色”）或十六进制（“#fff”）。有关支持的颜色规范的完整列表，请参阅SVG spec。

Answer 3

将const color = d3.scaleOrdinal(d3.schemeCategory20);替换为：

const color = d3.scaleOrdinal() 
.domain(["Crude oil","Natural gas",...])
.range(["#FD3E35","#FFCB06",...]);

并坚持：

.style('fill', (d,i) => {
  d.color = color(d.name.replace(/ .*/, ''));
  return d.color;})