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

Question

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

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

如果我这样做会失败

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

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

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

Answer 1

是这样的吗？

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

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

希望对您有所帮助！

Answer 2

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

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

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

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

javascript

d3.js

mapbox