How is this nice D3.js scattergraph highlighting effect achieved?

Question

I love the way this scatterchart highlights circles when you mouse over them: http://novus.github.com/nvd3/examples/scatterWithLegend.html

But there's a lot of code there (looks like the author has defined his/her own standard libraries) and I can't figure out exactly how the effect is achieved.

Is it something to do with the .hover class and the stroke-width property?

I'd like to achieve the same effect on my own scatter graph, although I'm using circles rather than paths, so it may not be possible.

Answer 1

In the example, the effect seems to be realised in scatter.js from line 136.

Just highlighting individual circles is much easier though and doesn't need all the other stuff the example does. All you need to do is add a mouseover handler to the circles and (for example) increase stroke-width. That would look something like

d3.selectAll("circle").data(...).enter()
  .append(...)
  .classed("circle", true)
  .on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); })
  .on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); });

I'm assuming that a CSS class highlight defines the style. Alternatively, you can just use (in this example) CSS class circle:hover without the need for the event handlers.