23

I've run into this problem a lot with D3. A lot of the time I like to overlay HTML objects over my SVG.

My current strategy is creating an empty DIV next to the SVG element called .html-overlay. I position it according to the internal padding I set in the SVG for my main graphic (ex: 20px). Then I use the following function (with jQuery) to figure out where the HTML element should go:

//element is the object returned by D3 .append()
var getOffset: function(element) {
        var $element = $(element[0][0]);
        return {
            left: $element.offset().left - $('.html-overlay').offset().left,
            top: $element.offset().top - $('.html-overlay').offset().top
        };
    }

I wonder, there MUST be some internal (non-jQuery dependant) way to quickly get an element's offset. It's very useful (especially after an elements goes through multiple translations, rotations, scales, etc.)

It would also be great to have functions for figuring out the offset of the "center" of an element, the topmost point of element, bottommost, leftmost, rightmost, etc.

NOTE:

The getBoundingClientRect() doesn't give the correct numbers for some reason:

var $element = $(element[0][0]);

            console.log($element.offset(), element[0][0].getBoundingClientRect())
Object
left: 328
top: 248.8333282470703
__proto__: Object

ClientRect
bottom: 376.83331298828125
height: 139.99998474121094
left: 328
right: 478
top: 236.8333282470703
width: 150
2
  • 6
    Did you ever get a good answer for this? I am interested as well. Mar 20, 2013 at 11:22
  • No, just ended up using jQuery's offset.
    – Toli
    Mar 21, 2013 at 19:10

3 Answers 3

17

did you try

var xywh =element[0][0].getBoundingClientRect();

seems to have everything in it? (original soution is in this post)

4
  • The getBoundingClientRect() doesn't give the correct numbers for some reason: var $element = $(element[0][0]); console.log($element.offset(), element[0][0].getBoundingClientRect()) ` ` Object left: 328 top: 248.8333282470703 proto: Object ClientRect bottom: 376.83331298828125 height: 139.99998474121094 left: 328 right: 478 top: 236.8333282470703 width: 150
    – Toli
    Oct 25, 2012 at 13:53
  • is your problem d3 specific? can you provide some short version (but complete) of code when your problem is reached. i created jsfiddle.net/hpHkb/13 where is shown that all 3 functions bRect, offset and position show same correct value (relative to document) with translation and rotation... there is probable no need of even including jquery and mixing it with d3. Oct 25, 2012 at 22:04
  • 6
    Just to add a note here, rather than using [0][0], you can instead use d3's node method: element.node().getBoundingClientRect()
    – James Lai
    Dec 8, 2013 at 2:15
  • 2
    Add scrollFirefoxOffset = document.documentElement.scrollTop; and scrollOffsetChrome = document.body.scrollTop; to the getBoundingClientRect().top for scrolling offset. It seems that Chrome and Firefox need different functions for that. Dec 2, 2014 at 8:55
11

The problem is with getBoundingClientRect, which doesn't account for scroll position or the element's container position relative to the document. It will only report back that item's exact position relative to the document top and left coordinates.

I've created a d3 method which will report back the position of the element. It works by looping through parent elements until it finds the container SVG, then considers that item's position in the calculations. It returns what you would normally receive from getBoundingClientRect.

Here's the method:

d3.selection.prototype.position = function() {

    var el = this.node();
    var elPos = el.getBoundingClientRect();
    var vpPos = getVpPos(el);

    function getVpPos(el) {
        if(el.parentElement.tagName === 'svg') {
            return el.parentElement.getBoundingClientRect();
        }
        return getVpPos(el.parentElement);
    }

    return {
        top: elPos.top - vpPos.top,
        left: elPos.left - vpPos.left,
        width: elPos.width,
        bottom: elPos.bottom - vpPos.top,
        height: elPos.height,
        right: elPos.right - vpPos.left
    };

};

And you can use this like so:

d3.select(element).position()

Note that I haven't actually added the code here to consider the scroll position.

4
  • 1
    getPositionViewPort is missing .. can u please add that
    – Lokesh
    May 27, 2014 at 11:35
  • change getPositionViewport(el.parentElement); to return getVpPos(el.parentElement);
    – Tong Gao
    Jul 1, 2014 at 20:53
  • Good solution that also works for those of us not using D3.js, but are still struggling to find the position of an svg element. Note my answer below for IE support. Feb 25, 2015 at 19:08
  • Since I just coded this myself, you can replace getVpPos with: if (elem instanceof SVGElement && !(elem instanceof SVGSVGElement)) elem = elem.ownerSVGElement; Oct 21, 2015 at 15:32
0

Extending James Lai's answer to support modern versions of IE:

function getVpPos(el) {
    if(el.parentNode.nodeName === 'svg') {
        return el.parentNode.getBoundingClientRect();
    }
    return getVpPos(el.parentNode);
}

Note: parentElement is changed to parentNode and tagName is changed to nodeName.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.