如何在 D3 中设置具有多个子部分的自定义色阶？答案

【问题标题】：How to set up custom color scale with multiple sub-parts in D3?如何在 D3 中设置具有多个子部分的自定义色阶？
【发布时间】：2020-10-18 12:04:33
【问题描述】：

我正在尝试为我的图例设置自定义 colorScale。结果应如下所示：

由于平滑过渡，它可能应该是d3.scaleLinear()，但无论我尝试什么，我都无法弄清楚方法。我已经尝试过d3.scaleThreshold()，它至少似乎可以很好地区分域部分。

var colorScale = d3.scaleThreshold()
                   .domain([20,35,50])
                   .range( ["#3AAA35", "#FCEA10", "#F39200", "#E30613", "#582123"] );

现在这似乎产生了最好的输出，例如：每个部分的离散颜色都达到阈值。

我尝试过类似的方法，但也完全没有效果：

.range([ d3.interpolateRgb("#3AAA35", "#FCEA10")),
         d3.interpolateRgb("#FCEA10", "#F39200"),
         d3.interpolateRgb("#F39200", "#E30613"),
         d3.interpolateRgb("#E30613", "#582123")]);

这看起来很简单，但我想不通。

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

就像阈值刻度一样，您可以在线性刻度范围和域中使用超过 2 个值，创建分段刻度：

const colorScale = d3.scaleLinear()
  .domain([0, 20, 35, 50, 100])
  .range(["#3AAA35", "#FCEA10", "#F39200", "#E30613", "#582123"]);

这是结果：

const colorScale = d3.scaleLinear()
  .domain([0, 20, 35, 50, 100])
  .range(["#3AAA35", "#FCEA10", "#F39200", "#E30613", "#582123"]);

const w = 550,
  h = 40;

const canvas = d3.select("body")
  .append("canvas")
  .attr("width", w)
  .attr("height", h);

const context = canvas.node().getContext("2d");

for (let i = 0; i < w; i++) {
  context.fillStyle = colorScale(i / (w / 100))
  context.fillRect(i, 0, 1, h);
};

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：