如何使用d3将圆环带到前面？

Question

首先，我正在使用d3.js在数组中显示不同大小的圆圈。在鼠标悬停时，我希望将鼠标悬停的圆圈变大，我可以这样做，但是我不知道如何将其置于最前面。目前，一旦渲染，它就隐藏在其他多个圈子的后面。我怎样才能解决这个问题？

这是一个代码示例：

   .on("mouseover", function() { 
    d3.select(this).attr("r", function(d) { return 100; })
  })

我尝试使用排序和排序html" target="_blank">方法，但是它们没有用。我敢肯定我没有正确地做。有什么想法吗？

Answer 1

您将不得不更改对象的顺序，并使鼠标悬停的圆圈成为最后添加的元素。正如您在此处看到的那样：并根据nautat的建议，必须在主脚本之前定义以下内容：

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

然后，您只需在鼠标悬停时moveToFront在您的对象上调用函数（例如circles）：

circles.on("mouseover",function(){
  var sel = d3.select(this);
  sel.moveToFront();
});

编辑： 根据Henrik Nordberg的建议，有必要使用的第二个参数将数据绑定到DOM
.data()。为了不丢失对元素的绑定，这是必需的。请阅读Henrick的答案（并支持！）以获取更多信息。作为一般建议，始终使用将.data()数据绑定到DOM时的第二个参数，以利用d3的全部性能。

编辑： 如Clemens Tolboom所述，反向功能为：

d3.selection.prototype.moveToBack = function() {
    return this.each(function() {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
            this.parentNode.insertBefore(this, firstChild);
        }
    });
};