С d3.js, как вы изменяете соответствующие узлы, когда у вас есть несколько вариантов выбора для одних и тех же данных?

Question

Я использую одни и те же данные, чтобы создать несколько разных частей моей визуализации. Я хочу создать событие наведения мыши на одном узле выделения, которое изменяет соответствующий узел в другом выделении. Что такое идиоматический способ d3 сделать это? (Я знаю, что могу использовать идентификатор, или вкладывать выбранные объекты, или сохранять информацию на карте в рамках обоих вариантов выбора ... но мне все эти стратегии кажутся грязными)

В качестве примечания, если есть хорошая ссылка на идиомы d3, которая может быть очень полезна при выполнении общих задач.

Answer 1

Выборки, как правило, переходные; вам не нужно держать их рядом, если вы можете так же легко выбрать их из документа. Таким образом, выбор по идентификатору является разумным вариантом.

Если вы не хотите присваивать своим элементам уникальные идентификаторы (что иногда затрудняет создание визуализаций в общем), тогда другой вариант - сохранить ссылку на связанные элементы через связанные данные. Например:

selection.each(function(d) { d.element = this; })

Теперь, предполагая, что те же данные d связаны с другим элементом, вы можете d3.select(d.element) выбрать исходный элемент. Вы можете выбрать более конкретное имя, чем «элемент», чтобы было понятно, на какой из двух (исходных и декоративных) элементов вы ссылаетесь.

С другой стороны, если у вас разные данные о разных элементах, вам понадобится другой способ связать их вместе. Если вы не хотите использовать идентификатор или другой подходящий селектор, тогда разумна и карта ссылок.