鼠标悬停和鼠标移出 d3.js 的问题

Question

我有以下代码：

我有两个小圆圈出现在大圆圈的鼠标悬停上。我面临的问题是-当我将鼠标移到较小的圆圈上时，它会消失，从堆栈溢出中发现添加pointer-events:none 将停止此操作。但我需要在这些圈子上绑定点击事件。这个问题有什么解决办法吗？

d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select("circle").on("mouseover", function() {
    d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
    d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
});

//attach a click event on .node-hover-button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script>
<svg>
  <g transform="translate(100,50)">
    <rect x="50" y="-30" width="50" height="60" id="yesDecision" class="hoverNodeundefined" style="fill: rgb(51, 110, 123);"></rect>
    <text x="80" y="0" class="id ">Yes</text>
    <circle class="node fixed" r="58" style="fill: rgb(30, 139, 195); stroke: rgb(21, 97, 136);" transform="scale(1.0)"></circle>
    <text x="0" y="20" class="id">Segment</text>
    <rect class="edit-event node-hover-button" x="-20" y="-70" height="29" width="29" rx="15" ry="15"></rect>
    <rect class="delete-event node-hover-button" x="-54" y="-54" height="29" width="29" rx="15" ry="15"></rect>
  </g>
</svg>

Answer 1

解决此问题的两种可能方法。

1. 使用 d3 事件的 toElement 属性。
2. 在单独的<g> 元素中将小圆圈和大圆圈分组。

方法一：

d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select("circle").on("mouseover", function() {
  d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
  var sCircle1 = d3.selectAll(".node-hover-button")[0][0];
  var sCircle2 = d3.selectAll(".node-hover-button")[0][1];
  if (d3.event.toElement != sCircle1 && d3.event.toElement != sCircle2) {
    d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
  }
});

//attach a click event on .node-hover-button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script>
<svg>
  <g transform="translate(100,50)">
    <rect x="50" y="-30" width="50" height="60" id="yesDecision" class="hoverNodeundefined" style="fill: rgb(51, 110, 123);"></rect>
    <text x="80" y="0" class="id ">Yes</text>
    <circle class="node fixed" r="58" style="fill: rgb(30, 139, 195); stroke: rgb(21, 97, 136);" transform="scale(1.0)"></circle>
    <text x="0" y="20" class="id">Segment</text>
    <rect class="edit-event node-hover-button" x="-20" y="-70" height="29" width="29" rx="15" ry="15"></rect>
    <rect class="delete-event node-hover-button" x="-54" y="-54" height="29" width="29" rx="15" ry="15"></rect>
  </g>
</svg>

方法二：

d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select(".nodes").on("mouseover", function() {
  d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
  d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
});

//attach a click event on .node-hover-button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script>
<svg>
  <g transform="translate(100,50)">
    <rect x="50" y="-30" width="50" height="60" id="yesDecision" class="hoverNodeundefined" style="fill: rgb(51, 110, 123);"></rect>
    <g class="nodes">
      <text x="80" y="0" class="id ">Yes</text>
      <circle class="node fixed" r="58" style="fill: rgb(30, 139, 195); stroke: rgb(21, 97, 136);" transform="scale(1.0)"></circle>
      <text x="0" y="20" class="id">Segment</text>
      <rect class="edit-event node-hover-button" x="-20" y="-70" height="29" width="29" rx="15" ry="15"></rect>
      <rect class="delete-event node-hover-button" x="-54" y="-54" height="29" width="29" rx="15" ry="15"></rect>
    </g>
  </g>
</svg>