Mouseover在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

您说过您需要工具提示，对吗？在上一个项目中，我使用title作为工具提示。我认为标题是显示为工具提示的简单方法。你尝试过吗？也许我用过类似.append("svg:title")的东西。我也有一个书签链接，此链接为您提供了有关d3.js中工具提示的详细信息。此链接包含工具提示的实时示例，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

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

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

它吞噬了您已经注册到cirle的所有鼠标事件。

因此，工具提示在圆上不起作用。

解决上述问题的一种方法是在组上附加圆圈，如下所示：

    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