How do I find the top left of my SVG with d3?

Question

Given an SVG created with d3, for example using

svg = d3.select("#someElement").append("svg")...

how do I find the top and left of the SVG in the absolute coordinates of the body, so that I can, for example, absolutely position a tooltip or other element relative to the top -left of the SVG with something like

tooltip.style("left", leftInBody + 72 + "px").style("top", topInBody + 20 + "px");

the top left of your svg, unless scales set it otherwise, is simply 0,0 — tomtomtom, Jun 19 '14 at 07:34
no, the coordinates in the svg area start from 0,0 in the top-left corner. otherwise you can use the methods posted here: http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element — tomtomtom, Jun 19 '14 at 13:16

score 1 · Accepted Answer · answered Jun 19 '14 at 00:45

1

You can do something like this (with jQuery):

var offset = $('#someElement svg').offset(),
    left = offset.left, top = offset.top;

also assuming that you're tooltip is a div outside of the root svg element.

If the tooltip is an svg element inside the root svg element, then you don't need to do this. The position you give it will automatically be relative to the root svg element.

answered Jun 19 '14 at 00:45

victormejia

1,174
3
12
30

1

Is there no d3 idiom for the position of the top or left of a given SVG within the `body`? – orome Jun 19 '14 at 02:41
Surprisingly, this looks like the way to go: jQuery is the answer. – orome Jun 26 '14 at 19:03
Hi @orome check the other answer – Peter Krauss Aug 08 '19 at 00:35
1

@PeterKrauss Great to see that d3 no supports this. Tone that answer down a bit at it will get some votes. – orome Aug 08 '19 at 00:36

score 0 · Answer 2 · answered Aug 08 '19 at 00:34

@victormejia answer is WRONG because is so old... We are in 2019 and D3 is so good!

Use d3.select(myElement).style('top'), d3.select(myElement).style('left').

Use parseInt() to clean the "px" string...
PS: to set a value, concatenate "px", d3.select(myElement).style('left',x+'px').

How do I find the top left of my SVG with d3?

2 Answers2