javascript - How is this nice D3.js scattergraph highlighting effect achieved? - Stack Overflow

admin管理员组

文章数量:1388929

I love the way this scatterchart highlights circles when you mouse over them: .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.

I love the way this scatterchart highlights circles when you mouse over them: http://novus.github./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.

• javascript
• data-visualization
• d3.js

Share Improve this question Follow asked May 27, 2012 at 8:10 flossfanflossfan 10.9k1616 gold badges4545 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptHow is this nice D3js scattergraph highlighting effect achievedStack Overflow