通过将鼠标悬停附加到圆圈，鼠标悬停在 d3.js 中不起作用答案

【问题标题】：Mouseover is not working in d3.js by attaching it to circles通过将鼠标悬停附加到圆圈，鼠标悬停在 d3.js 中不起作用
【发布时间】：2019-11-29 04:46:14
【问题描述】：

我正在尝试创建一个散点图以及使用画笔工具进行缩放。但不知何故，我无法显示工具提示，即使 .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')
        })

【问题讨论】：

.on("mouseover", function(){ - 在这个函数中你应该调用一个显示工具提示的函数

标签： javascript d3.js scatter-plot

【解决方案1】：

你说你需要工具提示，对吧？在我之前的项目中，我使用标题作为工具提示。我认为标题是显示为工具提示的简单方法。你试过了吗？也许我用过.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");});

【讨论】：

【解决方案2】：

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

    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

【讨论】：