javascript - d3 : Color Range with an array with more than 2 colors

Question

我正在尝试根据 .json 文件中的属性值对 map 中的图层进行着色(使用 MapBox)。但是，该代码仅适用于传递的 2 个颜色值。下面是我的颜色编码片段。

  var color =
    d3.scale.linear()
    .domain(range)
    .range([#F0F0D0', '#228B22]);

如果我这样做会失败

  var color =
    d3.scale.linear()
    .domain(range)
    .range(['930F16', '#F0F0D0', '#228B22]);

map 将显示前两种颜色的范围。

如果我想制作超过两种的颜色范围，我该如何扩展？例如，如果我希望下端为红色，中间分位数为白色，顶部分位数为绿色？

Answer 1

是这样的吗？

var color = d3.scale.linear()
    .domain([-1, 0, 1])
    .range(['#930F16', '#F0F0D0', '#228B22']);

这将在“#F0F0D0”和“#930F16”之间插入负值，在“#F0F0D0”和“#228B22”之间插入正值。

希望对您有所帮助!