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。

评论的编辑

Opps，错过了转型。怎么样：

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元素中获取圆形位置

1 个答案: