如何在等值线图上创建发散数据图例？

Question

我正在尝试使用不同的数据（从 -0.7 到 0.7）创建 choroplet 地图，但找不到让我的图例显示正确颜色的方法。问题是因为当颜色都是正号时总是 > 并且是连续的。现在因为我有负数，它不再起作用了。我该如何纠正这个问题？

    // get color depending on population differentiel value
function getColor(d) {
         return d > 0.7    ? '#b2182b' :
            d > 0.5    ? '#d6604d' :
            d > 0.3    ? '#f4a582' :
            d > 0.1    ? '#fddbc7' :
            d < -0.7   ? '#2166ac' :
            d < -0.5   ? '#4393c3' :
            d < -0.3   ? '#92c5de' :
            d < -0.1   ? '#d1e5f0' :    




                        '#f7f7f7';
}


var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [-0.7, -0.5, -0.3, -0.1, 0.1, 0.3, 0.5, 0.7],
        labels = [],
        from, to;

    for (var i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];

        labels.push(
            '<i style="background:' + getColor(from + 1) + '"></i> ' +
            from + (to ? ' à ' + to : '+'));
    }

    div.innerHTML = labels.join('<br>');
    return div;
};

Answer 1

问题是因为当颜色都是正号时总是 > 并且是连续的。现在因为我有负数，所以它不再起作用了。

不，这是因为您在没有任何充分理由的情况下混合了 > 和 <，而不是遵循数字递减的常规模式，例如：

function getColor(d) {
 return d > 0.7    ? '#b2182b' :
        d > 0.5    ? '#d6604d' :
        d > 0.3    ? '#f4a582' :
        d > 0.1    ? '#fddbc7' :
        d > -0.1   ? '#d1e5f0' :    
        d > -0.3   ? '#92c5de' :
        d > -0.5   ? '#4393c3' :
        d > -0.7   ? '#2166ac' :
                     '#f7f7f7';
}

现在停止点已对齐，因此每个停止点都是颜色范围的最小值。

我会更进一步，将停靠点和范围颜色存储在数据结构中，将范围的最小端与相应的颜色相关联：

var stops = [
    { stop: 0.7, color: '#b2182b' },
    { stop: 0.5, color: '#d6604d' },
    { stop: 0.3, color: '#f4a582' },
    { stop: 0.1, color: '#fddbc7' },
    { stop: -0.1, color: '#d1e5f0' },
    { stop: -0.3, color: '#92c5de' },
    { stop: -0.5, color: '#4393c3' },
    { stop: -0.7, color: '#2166ac' },
    { stop: -Infinity, color: '#f7f7f7' },
];

并通过循环遍历该数据结构重新创建 getColor() 函数：

function getColor(d) {
  for (var i in stops) {
    if (d > stops[i].stop) { return stops[i].color; }
  }
}

请注意，所有数字都大于-Infinity，因此该数据结构中的最后一项应作为默认情况。

并通过遍历相同的数据结构来创建图例，继承上一步的范围上限（并将其初始化为 Infinity，因为这是第一个范围的隐式上限）：

var rangeMax = 'Infinity';
for (var i in stops) {
    var rangeMin = stops[i].stop.toString();
    var rangeColour = stops[i].color;

    labels.push(
        '<i style="background:' + rangeColour + '"></i> ' +
        rangeMin + ' à ' + rangeMax
    );

    rangeMax = stops[i].stop;
}

Answer 2

getColor(from + 1) 是罪魁祸首。由于“+ 1”，您将永远超出您的规模。

请注意，即使删除它，您也会丢失最低的图例 (