javascript - 这个漂亮的 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而不需要事件处理程序。