这个很好的D3.js散点图突出效果如何实现？

Question

我喜欢这种散点图在鼠标悬停时突出显示圆圈的方式:http://novus.github.com/nvd3/examples/scatterWithLegend.html

但那里有很多代码(看起来作者已经定义了他/她自己的标准库),我无法弄清楚效果是如何实现的.

这与.hover班级和stroke-width财产有关吗？

我想在我自己的散点图上实现相同的效果,虽然我使用的是圆而不是路径,因此可能无法实现.

Answer 1

在该示例中,效果似乎在来自第136行的scatter.js中实现.

只是突出显示各个圆圈要容易得多,并且不需要示例所做的所有其他内容.您需要做的就是mouseover为圆圈添加处理程序并(例如)增加stroke-width.这看起来像

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); });

我假设CSS类highlight定义了样式.或者,您可以使用(在此示例中)CSS类,circle:hover而无需事件处理程序.