这种不错的D3.js散射图高光效果是如何实现的

How is this nice D3.js scattergraph highlighting effect achieved?

本文关键字：何实现 实现 D3 js 高光      更新时间：2023-09-26

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

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

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

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

在示例中，效果似乎是从第 136 行分散实现的.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，而无需事件处理程序。

相关文章：