javascript - 在 D3 中取消鼠标悬停在新创建的 DOM 元素上

Question

我创建了一个 DOM 元素，当它触发鼠标悬停事件时，它会创建新的 DOM 元素，例如标签或工具提示。不幸的是，有时这些元素是在鼠标当前位置下方创建的。这会触发该 DOM 元素的 mouseleave 事件，该事件通常负责删除新创建的 DOM 元素。

换句话说，当创建新元素时，鼠标不再“悬停”在最初触发事件的 DOM 元素上，而是“悬停”在新 DOM 元素上。浏览器将此读取为“mouseleave”事件，然后触发“mouseleave”函数。这个事件，碰巧的是，然后删除了新元素——即使用户没有移动鼠标。

这会导致出现一个循环，在这个循环中，新元素会快速创建和删除，当鼠标悬停在 DOM 元素的某个部分时，会导致闪烁效果。这是问题的简化版本:

https://jsfiddle.net/KingOfCramers/8wbfjap4/2/

var svg = d3.select("svg").style("background-color","grey")

var data = ["This is a circle"]

var circle = svg.selectAll("circle")
    .data(data)
  .enter()
  .append("circle")
    .attr("cx",100)
  .attr("cy",100)
  .attr("r", 20)
  .style("fill","red")


circle
.on("mouseover",function(d){
    var xPos = d3.select(this).attr("cx")
  var yPos = d3.select(this).attr("cy")
  svg
  .append("text").text(d)
  .attr("x",xPos)
  .attr("y",yPos)
})
.on("mouseleave",function(){
    d3.select("text").remove();
})

显然这个例子很愚蠢，但在数据更加拥挤的情况下，简单地将标签向上或向下移动 10 或 15 个像素并不是一个实用的解决方案。我也不能只创建相对于鼠标光标的标签，因为我经常会使用 D3 数据同时为多个 DOM 元素创建多个标签。大多数人如何解决这个问题？

谢谢。

Answer 1

如果您不需要与该新元素交互，只需使用 pointer-events: none; :

.attr("pointer-events", "none")

这里是你的代码有那个变化:

var svg = d3.select("svg").style("background-color", "grey")

var data = ["This is a circle"]

var circle = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 20)
  .style("fill", "red")


circle
  .on("mouseover", function(d) {
    var xPos = d3.select(this).attr("cx")
    var yPos = d3.select(this).attr("cy")
    svg
      .append("text").text(d)
      .attr("x", xPos)
      .attr("y", yPos)
      .attr("pointer-events", "none")
  })
  .on("mouseleave", function() {
    d3.select("text").remove();
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width=500 height=500></svg>