首先,我正在使用d3.js在数组中显示不同大小的圆圈。在鼠标悬停时,我希望将鼠标悬停的圆圈变大,我可以这样做,但是我不知道如何将其置于最前面。目前,一旦渲染,它就隐藏在其他多个圈子的后面。我怎样才能解决这个问题?
这是一个代码示例:
.on("mouseover", function() { d3.select(this).attr("r", function(d) { return 100; }) })
我尝试使用排序和排序方法,但是它们没有用。我敢肯定我没有正确地做。有什么想法吗?
您将不得不更改对象的顺序,并使鼠标悬停的圆圈成为最后添加的元素。正如您在此处看到的那样:并根据nautat的建议,必须在主脚本之前定义以下内容:
d3.selection.prototype.moveToFront = function() { return this.each(function(){ this.parentNode.appendChild(this); }); };
然后,您只需在鼠标悬停时moveToFront在您的对象上调用函数(例如circles):
moveToFront
circles
circles.on("mouseover",function(){ var sel = d3.select(this); sel.moveToFront(); });
编辑: 根据Henrik Nordberg的建议,有必要使用的第二个参数将数据绑定到DOM .data()。为了不丢失对元素的绑定,这是必需的。请阅读Henrick的答案(并支持!)以获取更多信息。作为一般建议,始终使用将.data()数据绑定到DOM时的第二个参数,以利用d3的全部性能。
.data()
编辑: 如Clemens Tolboom所述,反向功能为:
d3.selection.prototype.moveToBack = function() { return this.each(function() { var firstChild = this.parentNode.firstChild; if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); };