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”，您将永远无法承受规模。

请注意，即使将其删除，也将缺少最低的图例（<0.7）。您可以按照与最高图例类似的方式来处理它。

如何在Choroplet地图上创建发散数据图例？

2 个答案: