Javascript 浮动线会干扰mousemove功能

我对d3.js智慧的追求还在继续

这一次，我添加了一条垂直方向悬停的引导线，作为靠近指针的工具。问题在于，该行干扰了mousemove函数，因为它在图的其余部分的顶部添加了一个额外的层，这使得代码在指针突然移动时运行mouseout事件。有解决办法吗

我以以下方式实现了该功能：

svg.on("mousemove", function(d) {
    svg.select(".guideline").remove();
    //svg.select(".valuelabel").remove();

    svg.append("line")
        .attr("class", "guideline")
        .attr("x1", d3.mouse(this)[0]-3)
        .attr("x2", d3.mouse(this)[0]-3)
        .attr("y1", margin[0])
        .attr("y2", height+margin[0])
        .attr("opacity", originOpacity)
        .attr("stroke", "#333");

});

作为一个令人不安的事件的例子：

//Highlight each stack when hovering, and calculate y value for legend
stacks.on("mousemove", function(d) {
    svg.select(".label").remove();  

    //Calculate the closest index when hovering
    var perValue = width / data[0].data.length;
    var index = Math.ceil((d3.mouse(this)[0]-margin[3]) / perValue - 0.5);
    chart.selectAll(".valuelabel").each(function(data) { 
        if (data.name == d.name) { 
            d3.select(this).text(Math.round(data.data[index].y) + "%");
        } 
    });

    d3.select(this).attr("opacity", "1");
    svg.selectAll("." + d3.select(this).attr("class")).attr("opacity", "1");

    svg.append("text")
        .attr("class", "label")
        .attr("width", "100px")
        .attr("height", "20px")
        .attr("x", d3.mouse(this)[0] + 40)
        .attr("y", d3.mouse(this)[1] - 5)
        .text(d.group + ": " + d.name);
});
stacks.on("mouseout", function(d) {
    groups.selectAll("." + d.name).text(d.name);
    svg.select(".label").remove();
    svg.selectAll("." + d3.select(this).attr("class")).attr("opacity", originOpacity);
});

看起来你不想在指导线上看到任何东西