javascript - 丢失事件处理程序并在切换层后重新添加事件处理程序时遇到问题

Question

我有以下代码用于将 svg 组移到前面:

d3.selection.prototype.moveInFrontOf = function () {
    return this.each(function () {
        this[0].parentNode.append(this[0]);
    });
};

这有效地提高了层数。我坚持使用 d3 v3。如果我能够使用 d3 v4，那么我会使用新的 raise() 函数。事件处理程序丢失了，我很难将它们添加回来。这是我用来将点击处理程序添加回路径的代码:

d3.select(overlay).on('click', "javascript:alert('test')" );

JS 似乎是有效的，但是当我在元素检查器中检查路径元素时，没有添加点击处理程序。我想我已经读过，当使用 d3 动态更改组顺序时，事件处理程序会丢失。尝试重新添加事件处理程序是否也存在问题？或者是否有应该使用的特殊技术？或者我的代码看起来有问题吗？作为第一步，我可以制作一个更简单的模组吗？

Answer 1

由于您没有使用 D3 v4(以及方便的 raise() 和 lower() 函数)，您必须创建一个解决方法。使用 D3 v3 有不同的方法可以做到这一点(其中一些非常 hacky，一些更优雅一些)。

这个依赖于对 DOM 数组进行排序。这样，由于您只是对数组中的元素进行排序，因此不会丢失任何事件处理程序。

在此演示中，事件处理程序是一个将颜色更改为红色的 mouseover 事件。单击圆圈时，会通过对 DOM 数组进行排序来调出它:

var data = d3.range(4).map(d => ({
  clicked: false
}))

var circles = d3.selectAll("circle")
  .data(data);

circles.on("mouseover", function() {
  d3.select(this).attr("fill", "red")
}).on("mouseout", function() {
  d3.select(this).attr("fill", "blue")
});

circles.on("click", function() {
  d3.select(this).datum().clicked = true;
  circles.sort(function(a, b) {
    return d3.ascending(a.clicked, b.clicked)
  });
  d3.select(this).datum().clicked = false;
});

<script src="https://d3js.org/d3.v3.js"></script>
<svg width="400" height=200>
  <circle cy="100" cx="80" r="60" fill="blue" stroke-width="3" stroke="black"></circle>
  <circle cy="100" cx="160" r="60" fill="blue" stroke-width="3" stroke="black"></circle>
  <circle cy="100" cx="240" r="60" fill="blue" stroke-width="3" stroke="black"></circle>
  <circle cy="100" cx="320" r="60" fill="blue" stroke-width="3" stroke="black"></circle>
</svg>