如何使用D3.js在SVG中的ag元素中获取圆的位置

Question

我在SVG中的g元素内有一个圆圈。 g元素可以根据x坐标简单地移动。 g元素的位置可以随其移动而改变。 圆也按照该g元素的原样移动。 我的问题是如何获取该圆在SVG中的位置而不是其在g元素中的位置？ 我尝试了以下代码，但无法获得期望的结果： circleGroup.on("mouseover", function() { var translate = d3.transform(d3.select(this).attr("transform")).translate; alert(translate[0].x); });

有人可以帮助我在g元素中而不在g元素中检索圆的位置吗？ 我需要获取圆的位置才能从其在SVG中的位置而不是圆所在的g元素开始绘制一条线。非常感谢您的协助。 这是： JsFiddle

Answer 1

如果您希望将鼠标悬停在圆上，请在圆上创建.on处理程序，而不是g元素（通过这种方式，您知道哪个元素接收了事件）：

...
var circles = circleGroup.selectAll("circle")
    .data(circleData)
    .enter()
    .append("circle")
    .on("mouseover", mouseover)
...

function mouseover() {
   var self = d3.select(this);
   alert(self.attr('cx'));
}

更新小提琴 。

编辑评论

糟糕，错过了过渡。 怎么样：

function mouseover()
{
    var self = d3.select(this);
    var translate = d3.transform(self.attr("transform")).translate;
    alert(+self.attr('cx') + translate[0]);
}

更新小提琴2 。