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

Question

I have a circle inside g element in the SVG. The g element can move simply according to the x-coordinates. The position of the g element can change as it moves. The circle also moves as it is in that g element. My question is how can I retrieve the position of that circle in the SVG NOT its position in g element? I tried the following code but could not get what I am expecting: circleGroup.on("mouseover", function() { var translate = d3.transform(d3.select(this).attr("transform")).translate; alert(translate[0].x); });

May anyone assist me to retrieve the position of the circle in the SVG not in the g element, please? I need to get the position of the circle in order to draw a line starting from its position in the SVG not the g element where the circle is in. Your assistance would be very much appreciated. Here is: JsFiddle

Answer 1

If you want the position of the circle you moused-over, I would create my .on handler on the circles instead of the g element (this way you know which element received the event):

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

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

Updated fiddle .

EDITS FOR COMMENT

Opps, missed the transition. How about:

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

Updated fiddle 2 .