javascript - 鼠标悬停在 d3.js 中无法通过将其附加到圆圈来工作

Question

我正在尝试创建一个散点图以及带有画笔功能的缩放功能。但不知怎的，我无法显示工具提示，甚至 .on("mouseover") 也不起作用。无法追踪确切的问题。您可以在 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

问题是下面的群组覆盖了您的圈子。

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

它会消耗掉您在圆圈中注册的所有鼠标事件。

因此，工具提示不适用于圆圈。

解决上述问题的方法之一是在组上添加圆圈，如下所示:

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

工作代码here