小编典典

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

javascript

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

这是一个代码示例:

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

我尝试使用排序和排序方法,但是它们没有用。我敢肯定我没有正确地做。有什么想法吗?


阅读 484

收藏
2020-05-01

共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);
        }
    });
};
2020-05-01