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

【问题标题】：d3.js Sankey diagram: rectangles fill colord3.js 桑基图：矩形填充颜色
【发布时间】：2012-10-22 07:23:54
【问题描述】：

所以我在玩 d3.js 桑基图。

在this example（如上图）中，颜色是使用

定义的

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 中包含十六进制颜色代码吗？

【问题讨论】：

标签： d3.js sankey-diagram

【解决方案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); });

【讨论】：

谢谢。我让它工作了，但根据我正在做的事情，从 Json 中提取颜色更容易。但这在未来会非常非常有用。

【解决方案2】：

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

【讨论】：

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

【解决方案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;})

【讨论】：