这个不错的D3.js散点图突出显示效果如何实现？

Question

我喜欢这个scatterchart突出圆圈的方式，当你对他们的鼠标：http://novus.github.com/nvd3/examples/scatterWithLegend.html

但是有很多的代码中有（看起来像笔者定义他/她自己的标准库），我无法弄清楚到底效果如何实现。

是否与.hover类和stroke-width属性有关？

我想在自己的散点图上实现相同的效果，虽然我使用的是圆而不是路径，所以它可能不可行。

Answer 1

在这个例子中，效果似乎在scatter.js从线136

实现只需突出个性的圈子是很容易，但并不需要所有其他的东西的例子一样。你需要做的就是向圆圈添加一个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而不需要事件处理程序。