CODEWITHSUNDEEP
d3.jssvg
Deeksha Mulgaonkar
Deeksha Mulgaonkar

Reputation: 463

Tooltip does not appear for the overlapped circles in d3.js

I am creating a scatter Plot in which the points sometimes overlap each other. On mouse-over on any of those points, either the tooltip flickers or sometimes it does not appear. Can any one help me out with this? 

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

On mouseover on the overlapped circles the tooltip does not appear

Upvotes: 3

Views: 478

Answers (1)

Deeksha Mulgaonkar
Deeksha Mulgaonkar

Reputation: 463

I got the solution for the above question asked by me. On mouse-out the duration given to the tooltip was causing the flickering issue.

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

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

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

On removing the duration(100), the above raised issue was solved.

Upvotes: 6

Related Questions