Как сохранить цветовую шкалу d3 с разрывом и повторным соединением ссылок

Question

Как сохранить цветовую шкалу d3 с разрывом и повторным соединением ссылок

1

У меня есть блок d3: https://bl.ocks.org/anonymous/70ad367d980d33160d0681881ab10aae

Функциональность, которой я занимаюсь, - это слайдер, который отключает ссылки (на основе этого примера: https://bl.ocks.org/jrladd/c76799aa63efd7176bd9006f403e854d). Эта функциональность работает, за исключением того, что цветовая шкала, которую я реализовал, не переносится после изменения порога связи. Цветовая шкала правильна при первом отображении графика, но она изменяется/является неправильной, как только порог изменяется. Когда порог возвращается к наименьшему значению, цветовая шкала остается некорректной.

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

Как сохранить точность цветовой шкалы при разрыве и воссоединении ссылок?

Cameron Taylor 12 июнь 2017, в 21:52

Источник

Теги:

javascript

d3.js

colors

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-06-12T21-06-00.000Z

Если вы 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

PS: Вы увидите, что функция цвета возвращает черный и белый для экстремальных значений. Вы можете настроить эту функцию соответствующим образом.
Большое спасибо - это отлично ответило на мой вопрос и дало отличное объяснение. Не могли бы вы указать мне правильное направление для обновления функции цвета, чтобы избежать супер темных / светлых цветов? Логично, что я думаю, что функции нужно будет сказать, с какими цветами начинать и заканчивать диапазон.