我喜欢这个散点图在你把鼠标悬停在圆圈上时突出显示圆圈的方式: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
,而无需事件处理程序。