CODEWITHSUNDEEP
javascriptsvgd3.js
Oscar Robinson
Oscar Robinson

Reputation: 1003

D3 Coordinates of mousedover circle

I'm trying to access the coordinates of a mousedover circle so that a new circle can be drawn and animated in the same position. Circles are added when the user clicks on the page so are added with this on mouseover property assigned to them.

I'm trying to access the x,y position of the current circle moused over with

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

where currentCircle is

var currentCircle = this;

However, it always gives null

currentCircle definitely holds the correct SVG element as when console.log(currentCircle) is called we get

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

in the console.

How do I get the circle's x and y coords?

Fiddle of the entire setup in the link

http://jsfiddle.net/Tu3EZ/

Upvotes: 1

Views: 341

Answers (1)

Oscar Robinson
Oscar Robinson

Reputation: 1003

From Robert's comment:

Turned out I forgot to set the cx and cy for the circles on initialization so these properties were obviously null when being read.

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

To set initial circle pos rather than

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

Updated Fiddle

Upvotes: 1

Related Questions