如何使用 d3 将圆圈置于最前面？

Question

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

这是一个代码示例：

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

我尝试使用 sort 和 order 方法，但它们不起作用。我很确定我没有正确地做到这一点。有什么想法吗？

Answer 1

TL;DR

使用最新版本的 D3，您可以使用 selection.raise()，正如 tmpearce 在 its answer 中所解释的那样。请向下滚动并投票！

---

原答案

您必须更改对象的顺序，并使鼠标悬停的圆圈成为最后添加的元素。正如您在此处看到的：https://gist.github.com/3922684 和 nautat 的建议，您必须在主脚本之前定义以下内容：

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

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

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

编辑： 正如Henrik Nordberg 所建议的，有必要使用.data() 的第二个参数将数据绑定到DOM。这对于不失去对元素的约束是必要的。请阅读 Henrick 的回答（并投赞成票！）以获取更多信息。作为一般建议，在将数据绑定到 DOM 时，始终使用 .data() 的第二个参数，以利用 d3 的全部性能功能。

---

编辑： 正如Clemens Tolboom 所提到的，反向函数将是：

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

Answer 2

从 d3 版本 4 开始，有一组内置函数可以处理此类行为，而无需自己实现。请参阅d3v4 documentation 了解更多信息。

长话短说，要将元素放在前面，请使用selection.raise()

selection.raise()

按顺序将每个选定元素重新插入为其父元素的最后一个子元素。相当于：

selection.each(function() {
this.parentNode.appendChild(this);
});

Answer 3

如果您使用moveToFront() 方法，请确保为data() 连接方法指定第二个参数，否则您的数据将与您的DOM 不同步。

d3.js 将您的数据（提供给parse()）方法与您创建的 DOM 元素连接起来。如果您按照上述建议操作 DOM，d3.js 将不知道哪个 DOM 元素对应于哪个数据“点”，除非您在 data() 调用中为每个数据“点”指定唯一值，如 API reference 所示：

.data(data, function(d) { return d.name; })

Answer 4

根据我对 IE9 的痛苦体验，使用 parentNode.appendChild 可能会导致节点中的事件处理程序丢失。所以我倾向于使用另一种方法，即对节点进行排序，使选中的节点在其他节点之上：

     .on("mouseover", function(selected) {
        vis.selectAll('.node')
        .sort(function(a, b) {
          if (a.id === selected.id) {
            return 1;
          } else {
            if (b.id === selected.id) {
              return -1;
            } else {
              return 0;
            }
          }
        });
      })