Прикрепление произвольных данных к объектам в D3.js

Question

Это в основном связано с тем, что «лучшая практика» будет с D3.js. Я хочу привязать произвольную информацию к различным элементам svg, которые у меня есть на странице, после их создания. В D3 он выглядит как обычно генерирующий элементы svg из набора данных. Я хочу привязать данные к этим элементам svg в любое время, не добавляя их атрибуты HTML.

Есть ли хороший способ сделать это? Нужно ли использовать вспомогательный массив/объект или есть способ применить данные к самим элементам?

Answer 1

Вы бы использовать datum method если вы хотите прикрепить произвольные данные:

D3.select('#mynodeId').datum(mydata); 

А потом вы могли бы получить доступ к значению снова:

var mydata = D3.select('#mynodeId').datum(); 

Внутренне D3 собирается использовать __data__ свойство узла, как и при создании узлов из набора данных через последовательность selectAll, enter, append.

Обратите внимание, что если у вас уже есть ссылка на узел DOM вы можете передать его в качестве параметра D3.select вместо того, чтобы его повторно просмотровых на основе синтаксиса селектора:

D3.select(anExistingDOMNodeReference).datum(mydata); 

От the API doc:

d3.select (node): Выбирает указанный узел. Это полезно, если у вас уже есть ссылка на узел, такой как d3.select (this) внутри прослушивателя событий или глобальный, например document.body.