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']);

这将在＆＃39;＃F0F0D0＆＃39;之间进行插值。和＆＃39;＃930F16＆＃39;对于负值，＆＃39;＃F0F0D0＆＃39;和＆＃39;＃228B22＆＃39;为正值。

希望它有所帮助！

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种颜色

2 个答案: