Mouseover is not working in d3.js by attaching it to circles

Question

I am trying to create a scatter graph along with zoom with brush facility. But somehow i am not able to show tooltip, even .on("mouseover") is not working. Not able to track down the exact problem. You can see the code in JSFiddle

    let svg = d3.select("#scattergraph").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    let scatter = svg.append("g")
      .attr("id", "scatterplot")
      .attr("clip-path", "url(#clip)");

    scatter.selectAll(".dot")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", function (d) {
        const radius = (d.size / maxSize) * 10;
        if (radius < 4) {
          return radius + 3
        }
        return radius + 2;
      })
      .attr("cx", function (d) { return x(d.x); })
      .attr("cy", function (d) { return y(d.y); })
      .attr("opacity", 0.5)
      .attr("stroke-width", 1)
      .attr("stroke", "black")
      .style("fill", 'aqua')
        .on("mouseover", function(){
          console.log('doing mouseovr')
        })

Answer 1

you said you need tooltip, right? In my previous project, I have used title as a tooltip. I think title is the easy way to show as a tooltip. have u tried it? maybe i have used something like .append("svg:title") . also i had bookmarks a link, this link give you details about tooltip in d3.js. this link contain live example of tooltip, d3 tooltip

d3.select(".example_div svg")
    .append("svg:circle")
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Answer 2

The problem is the group below overlays over your circles.

    scatter.append("g")
      .attr("class", "brush")
      .call(brush);

It eats up all mouse events, that you have registered to the cirle.

So, the tooltip does not work on the circles.

One, way to fix the above problem would be to append circles over the group, something like below:

    scatter.append("g")
      .attr("class", "brush")
      .call(brush);

    scatter.selectAll(".dot")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", 4)
      .attr("cx", function (d) { return x(d.x); })
      .attr("cy", function (d) { return y(d.y); })
      .attr("opacity", 1)
      .attr("stroke-width", 1)
      .attr("stroke", "black")
      .style("fill", 'aqua')
        .on("mouseover", function(){
          console.log('doing mouseovr')
        })
      .on("mousemove", mouseover)
      .on("mouseout", mouseleave);

Working code here