这个很好的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，而无需事件处理程序。