这个漂亮的 D3.js 散点图高亮效果是如何实现的？

【问题标题】：How is this nice D3.js scattergraph highlighting effect achieved?这个漂亮的 D3.js 散点图高亮效果是如何实现的？
【发布时间】：2012-06-02 02:35:10
【问题描述】：

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

但是那里有很多代码（看起来作者已经定义了他/她自己的标准库），我无法确切地弄清楚效果是如何实现的。

这与.hover 类和stroke-width 属性有关吗？

我想在我自己的散点图上实现相同的效果，尽管我使用的是圆圈而不是路径，所以这可能是不可能的。

【问题讨论】：

标签： javascript data-visualization d3.js

【解决方案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 而无需事件处理程序。

【讨论】：