Finding coordinates of SVG rect element

[Daisy]

Hi guys,

I am wondering if there's a way in d3 to get the coordinates of SVG rect element.

I am not talking about the "x" and "y" attributes but the actual coordinates on the canvas.

For example in jQuery, there's $("this").offset().left or $("this").offset().top.

I have checked the d3 API for SVG element.

I found something like line.x().

Is there one for rectangle elements?

Any hint would be much appreciated.

Thank you.

Daisy

[marc fawzi]

not d3 based, for new-ish browsers

function getAbsoluteXY(element) {
   var viewportElement = document.documentElement;
   var box = element.getBoundingClientRect();
var scrollLeft = viewportElement.scrollLeft;
   var scrollTop = viewportElement.scrollTop;
   var x = box.left + scrollLeft;
   var y = box.top + scrollTop;
   return {"x": x, "y": y}
}

var point = getAbsoluteXY(d3 selected SVG rect)
console.log(point.x)
console.log(point.y)

--
Javascript/HTML5 >>
http://www.youtube.com/watch?v=Wd-d1p-c56U (Twitter Art Client --
Watch Me First)
http://www.youtube.com/watch?v=UX5jOvdLG8c (Canvas2Vector Effects)
http://www.youtube.com/watch?v=VLyLb3Otw5s (SVG Saving And Manipulation)

idom: http://idibidiart.github.com/idi.bidi.dom/ (DOM Anti-Templating)

Social >>
LinkedIn: http://www.linkedin.com/in/marcfawzi
Javascript blog: http://javacrypt.wordpress.com/
Thinking blog: http://evolvingtrends.wordpress.com/

[Daisy]

I tried it with chrome.

It said that my SVGRectElement has no getBoundingClientRect() method.

I haven't tried it on FF.

Is it the browser problem or my SVGRectElement?

[Bob Monteverde]

Hey Daisy, you can check out what I'm doing for my tooltips.

It's essentially a two step process.  I calculate the x and y within the SVG, then I calculate the X and Y of the SVG from the browser top left.

For the SVG I do: this.parentNode.offsetLeft and this.parentNode.offsetTop .. where this is the SVG element.  I haven't confirmed, but I believe this may require the SVG to be wrapped in a DIV. (so the top and left would be the same as the svg).

Inside the SVG, I usually use the data point's X and Y (calculated with the scale).  But if you don't have that option, I believe you can do  element.getBBox().left and .top... though I'm not 100% sure on that, I know it works with text nodes a the very least.  But I'm guessing you're positioning the rect mathematically, so you should be able to use that for the X and Y.

Hope that helps, I'll give an example later if you don't get it working,.. just a little busy right now.

Bob

[Daisy]

Thanks Bob!

I looked into jQuery last night and found out that it has something like .offset().left and .offset().top; exactly as you suggested above.

For the SVG, I think you are right about wrapping in a DIV so that the RectElements can have the same (0,0) coordinate as SVG. I am still trying the different selection to see which one works.

(Since I am new to all these front-end stuff)

You are right about me trying to positioning the rect mathematically. My ultimate goal is to try to put text value only on selected bar. I haven't seen any example online about D3 doing this.

That's why I am getting the individual SVGRectElement and trying to find out their physical position and then put the text on top of the selected bars.

Daisy

[Bob Monteverde]

Text on top of the bar, like this?

http://novus.github.com/nvd3/ghpages/discreteBar.html

[Ian Johnson]

within an SVG element you can do the following:

var p = element.nearestViewportElement.createSVGPoint();
var matrix = element.getTransformToElement(element.nearestViewportElement);
p.x = 0; //bbox.x;
p.y = 0; //bbox.y;
var sp = p.matrixTransform(matrix);

Where element is the node of the svg element you want to get it's position. I use 0, 0 for the x and y because most of the time a transformed element's bbox has 0, 0. You could also getBBox() of the element and get the x and y coordinates to be most accurate.

sp will contain the coordinates from the top left of the SVG element.

--
Ian Johnson

http://enja.org

[marc fawzi]

i suppose wrapping the SVG element in a div and invoking
getBoundingClientRect on the div would work equally well.

jQuery's own implementation (the recent one, according to its author)
relies on getBoundingClientRect (for browsers that support it)

Ian's method is really intriguing as it works directly within the SVG DOM ...

On Thu, Jun 28, 2012 at 1:47 PM, Bob Monteverde <b...@novus.com> wrote:

[Daisy]

Yes.

but I only want it to be on selected bar.

For example, only the maximum gets to show the text value.