Question

My quest for d3.js wisdom continues!

This time, I have added a guide line which is hovering in a vertical direction as a tool close to the pointer. The problem is that the line disturbs the mousemove functions since it adds an extra layer on top of the rest of the graph, which makes the the code run the mouseout event on sudden pointer movements. Is there a solution for this?

I have implemented the function in the following manner:

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");

});

And as an example of an event it is disturbing:

//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);
});

Answer 1

Looks like you want pointer-events none on the guide line.