d3：具有超过 2 种颜色的数组的颜色范围答案

【问题标题】：d3: Color Range with an array with more than 2 colorsd3：具有超过 2 种颜色的数组的颜色范围
【发布时间】：2015-08-30 19:59:46
【问题描述】：

我正在尝试根据 .json 文件中的属性值对地图中的图层进行着色（使用 MapBox）。但是，该代码仅适用于通过的 2 个颜色值。下面是我的颜色编码的 sn-p。

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

如果我这样做会失败

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

地图会显示前两种颜色的范围。

如果我想做超过两种颜色的范围，我将如何扩展？例如，如果我希望下端为red，中间分位数为white，顶部分位数为green？

【问题讨论】：

标签： javascript d3.js mapbox

【解决方案1】：

这样的？

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

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

希望对你有帮助！

【讨论】：

【解决方案2】：

range() 输入数组中的元素数被截断以匹配domain() 中的元素数。要使用三种颜色，您需要将比例的domain() 设置为也具有三个元素。这就是您在 sn-p 中（令人困惑地）调用 range（变量）的内容。

var color =
    d3.scale.linear()
        .domain([d3.min(data), (d3.max(data)-d3.min(data))/2, d3.max(data)])
        .range(['#930F16', '#F0F0D0', '#228B22']);

【讨论】：