score:2

Accepted answer

I think the problem relates to the use of transitions. There are four places where the chart function is called with a selection that has been returned from .transition(), and that appears not to work.

Three of the four changes are in lines 63, 69 and 74 of d3linewithlegend.js. Each of these three lines reads as follows:

        selection.transition().call(chart)

Replace each line with

        selection.call(chart).transition()

Finally, in the index.html file, replace

  svg.transition().duration(500)
      .attr('width', width(margin))
      .attr('height', height(margin))
      .call(chart);

with

  svg.call(chart).transition().duration(500)
      .attr('width', width(margin))
      .attr('height', height(margin))

After making this change, hovering over the legend worked for me, in Chrome, Firefox and Edge.

Transitions were overhauled in D3 version 3.0, so it's perhaps not a surprise that D3 v2 code involving them doesn't work in D3 v3. I can't say I understand them well enough to know exactly where the problem is, but I did observe that if enter the following line in the console

d3.select("body").transition().transition()

then D3 throws the same exception that I got when I tried to view the visualization you linked to. This led me to avoid a situation where transition() was being called on a selection returned by a call to transition().


Related Query

More Query from same tag