javascript - D3 鼠标悬停圆的坐标

Question

我正在尝试访问鼠标悬停圆圈的坐标，以便可以在同一位置绘制新圆圈并为其设置动画。当用户单击页面时会添加圆圈，因此会在分配给它们的鼠标悬停属性上添加圆圈。

我正在尝试访问鼠标悬停在的当前圆的 x,y 位置

var y = d3.select(currentCircle).attr("cy");

当前圆在哪里

var currentCircle = this;

但是，它总是给出 null

currentCircle 肯定保存了正确的 SVG 元素，当调用 console.log(currentCircle) 时我们得到

<circle transform=​"translate(590,358)​" r=​"10" style=​"fill:​ rgb(0, 0, 0)​;​">​</circle>​

在控制台中。

如何获取圆的 x 和 y 坐标？

链接中整个设置的 fiddle

http://jsfiddle.net/Tu3EZ/

Answer 1

来自罗伯特的评论:

结果我忘记在初始化时设置圆圈的 cx 和 cy，因此这些属性在读取时显然为空。

.attr("cx", x)
.attr("cy", y)

设置初始圆位置而不是

.attr("transform", function(d, i) { return "translate("+x+","+y+")"; })

Updated Fiddle