javascript - 将元素悬停在图表上

Question

我有一个条形图。我想做同样的选择，但不是突出显示，而是画线。有可能吗？

Answer 1

我能想到的最简单的选择就是 append一个<line>每当你mouseover到SVG一个栏，并在您 mouseout 时删除该行.它类似于@ckersch 提出的解决方案，除了它有更多的开销(你每隔 mouseover/mouseout 更改 DOM)，但更容易实现并且根本不会改变你的 SVG 的结构.您可以在附加条形图时添加以下内容:

.on("mouseover", function(d){
    svg.append("line")
       .attr("class", "mouseover-line")
       .attr("x1", x(d[0]) + x.rangeBand()/2)
       .attr("x2", x(d[0]) + x.rangeBand()/2)
       .attr("y1", y(0))
       .attr("y2", y(d[1]));
       .style("stroke", "#000")
})
.on("mouseout", function(){
    d3.selectAll(".mouseover-line").remove();
});

工作 fiddle here .