У меня есть блок d3: https://bl.ocks.org/anonymous/70ad367d980d33160d0681881ab10aae
Функциональность, которой я занимаюсь, - это слайдер, который отключает ссылки (на основе этого примера: https://bl.ocks.org/jrladd/c76799aa63efd7176bd9006f403e854d). Эта функциональность работает, за исключением того, что цветовая шкала, которую я реализовал, не переносится после изменения порога связи. Цветовая шкала правильна при первом отображении графика, но она изменяется/является неправильной, как только порог изменяется. Когда порог возвращается к наименьшему значению, цветовая шкала остается некорректной.
Я попытался использовать одну и ту же переменную для цветовой шкалы для начального рендеринга и нового рендеринга, и это вернуло тот же неверный результат.
Как сохранить точность цветовой шкалы при разрыве и воссоединении ссылок?
Если вы console.log(d.value)
внутри обработчика событий, вы увидите, что значение datum (d.value
) в выборе ввода (linkEnter
) всегда равно 179
(что является последним значением). И это ожидалось, так как функция привязки данных по умолчанию связывает данные по индексу.
При этом решение здесь просто использует ключевую функцию:
link = link.data(newData, function(d){ return d.value});
//this is the key function -----^
Поскольку значения в d.value
не уникальны, лучшим решением будет создание уникального свойства для ссылок.
Кроме того, не забудьте обновить цвета в разделе "Обновление".
Вот обновленные bl.ocks: https://bl.ocks.org/anonymous/59f0783654d89e5a45c55ecf150032bc