Question

我对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);
});

Answer 1

您似乎希望引导线上没有pointer-events无。

浮动线干扰了mousemove功能

1 个答案: