2

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

1 回答 1

3

看起来您不希望在指南上出现指针事件。

于 2012-10-01T17:49:36.893 回答