score:1

You can use event delegation to solve this.

Instead of having one listener for each DOM node, you only use one listener on a parent node. Then whenever the event happens, you lookup event.target to identify which node should be animated.

Example implementation, assuming you have the following html:

<svg id="parentNode">
    <!-- All the interactive nodes are here... -->
</svg>

then this javascript does the trick:

d3.selectAll('#parentNode') // this is only one item
    .on('mouseover', function() {
        var element = d3.select(d3.event.target)
        // element is the DOM node with which you want to interact...
    })
    .on('mouseout', function() {
        var element = d3.select(d3.event.target)
        // [...]
    })

Related Query

More Query from same tag