Как создать легенду с расходящимися данными на карте хороплета? - PullRequest
Новая
       19

Как создать легенду с расходящимися данными на карте хороплета?

0 голосов
/ 20 июня 2019

Я пытаюсь создать карту хороплетов с расходящимися данными (в диапазоне от -0,7 до 0,7) и не могу найти способ, чтобы моя легенда показывала правильные цвета.Проблема в том, что когда цвета имеют все положительные признаки, это всегда> и является последовательным.Теперь, потому что у меня есть отрицательные числа, это больше не работает.Как я могу это исправить? 

    // 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;
};

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Проблема в том, что когда цвета имеют все положительные знаки, это всегда> и является последовательным. Теперь, когда у меня отрицательные числа, это больше не работает.

Нет, это потому, что вы смешиваете > и < без какой-либо веской причины, вместо того, чтобы следовать обычному шаблону убывающих чисел, например ::

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;
}
0 голосов
/ 20 июня 2019

getColor(from + 1) является виновником.Из-за «+ 1» вы всегда будете за пределами своей шкалы.

Обратите внимание, что даже после его удаления вам будет не хватать самой низкой легенды (<0,7).Вы можете справиться с этим так же, как ваша высшая легенда. </p>

...