Question

I use the same data to create few different parts of my visualization. I want to create a mouseover event on one node of a selection that modifies the corresponding node in another selection. What is the idiomatic d3 way to do that?
(I know I can use the id, or nest the selections, or store info in a map within scope of both selections…but these all seem messy strategies to me)

As a side note, if there is a good “d3 idioms” reference that could be very helpful when doing common tasks.

Answer 1

Selections are generally transient; you don’t need to keep them around if you can just as easily reselect them from the document. So, selecting by id is a reasonable option.

If you don’t want to give your elements unique ids (which is sometimes a pain when creating visualizations generically), then another option is to store a reference to the associated elements via the bound data. For example:

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

Now, assuming that the same data d is bound to another element, you can d3.select(d.element) to select the original element. You might choose a more specific name than “element” to make it clear which of the two (original, and decorative) elements you are referring to.

On the other hand, if you have different data on different elements, then you’ll need a different way to link them together. If you don’t want to use an id or another suitable selector, then a map of references is reasonable too.