Question

我正在创建一个散点图，其中点有时会相互重叠。在任何这些点上鼠标悬停时，工具提示会闪烁或有时不会出现。任何人都可以帮我解决这个问题吗？

dots.on("mouseenter", function(d) {
                d3.select(this).attr({
                    r: radius * 2
                });
                d3.selectAll(".crosshair")
                    .style("display", "block");

                var xCoord = d3.mouse(this)[0];
                var yCoord = d3.mouse(this)[1];

                addCrossHair(xCoord, yCoord);
                tooltipDiv
                    .style("top", (d3.event.pageY + 2) + "px")
                    .style("left", (d3.event.pageX - 28) + "px")
                    .style("opacity", 0.9)
                    .style("display", "block")
                    .html(content);
            });

            dots.on("mouseout", function(d) {

                d3.select(this).attr({
                    r: radius
                });
                d3.selectAll(".crosshair")
                    .style("display", "none");

                tooltipDiv.transition()
                   .duration(100)       
                   .style("display", "none");
            });

        //tooltip //
        var tooltipDiv = d3.select("#scatterChart")
                    .append("div")
                        .attr("class", "d3-tip n")
                        .style("opacity", 0)
                        .style("position","fixed")
                        .style("display", "block")
                        .style("top", 100)
                        .style("left", 100)
                        .style("pointer-events","none");

        //crossHair//               
         function addCrossHair(xCoord, yCoord) {
            if(!xCoord || !yCoord){ // don't draw cross hair if no valid coordinates given
                return;
            }
            d3.select("#h_crosshair")
                .attr("x1", 0)
                .attr("y1", yCoord)
                .attr("x2", width)
                .attr("y2", yCoord)
                .style("display", "block");

            d3.select("#v_crosshair")
                .attr("x1", xCoord)
                .attr("y1", 0)
                .attr("x2", xCoord)
                .attr("y2", height)
                .style("display", "block");
        }

Answer 1

我得到了上述问题的解决方案。在鼠标移出时，工具提示的持续时间导致闪烁问题。

       dots.on("mouseout", function(d) {

            d3.select(this).attr({
                r: radius
            });
            d3.selectAll(".crosshair")
                .style("display", "none");

            tooltipDiv.transition()      
               .style("display", "none");
        });

在删除持续时间（100）后，上述问题得以解决。

d3.js中重叠圆圈不显示工具提示

1 个答案: