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

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); });

谁能帮我找回圆圈在 SVG 中而不是在 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'));
}

已更新 fiddle。

评论编辑

糟糕，错过了转换。怎么样：

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

已更新 fiddle 2。

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

How to get a circle position in a g element in SVG using D3.js

javascript

svg

d3.js