d3.js桑基图：矩形填充颜色

Question

我正在尝试使用d3.js桑基图进行操作。

在这个示例中（如上图所示），颜色是通过以下方式定义的：

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())
    .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中包含十六进制颜色代码?

- lucastimmons

Answer 1

或者，您可以使用d3序数比例尺将颜色直接映射到分区，如文档中所述。请参见底部的Colorbrewer。

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

然后

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

- imrane

---

谢谢。我已经搞定了，不过基于我的操作，从Json中提取颜色更容易。但是这对未来非常有帮助。 - lucastimmons

Answer 2

看起来你想在这种情况下在JSON中包含颜色。 你可以以任何浏览器识别的方式包含它，例如作为名称（“white”）或十六进制（“#fff”）。请参见SVG规范，了解支持的颜色规范的完整列表。

- Lars Kotthoff

---

谢谢。这正是我所想的。根据我的操作，这将完美地工作。现在，.style("fill", function(d) { return d.color; }) 从与每个节点相关联的 .json 文件中提取颜色。 - lucastimmons

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

- Zhong Sissie