Get size of svg g of element

Question

As you can see here element g https://i.stack.imgur.com/k9xI2.jpg with different browser zoom levels. I would like to get those values 402x398 and 1608x1582 or whatever the values would be while zooming.

var container - is the svg g that I am looking for dimensions of

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.append('rect')
              .classed('bg', true)
              .attr('stroke', 'transparent')
              .attr('fill', 'transparent')
              .attr("x", 0)
              .attr("y", 0)
              .attr('width', w)
              .attr('height', h)
               .call(d3.behavior.zoom()
          .on("zoom", function() {

            container.attr("transform", "translate(" + d3.event.translate + 
              ")scale(" + d3.event.scale + ")");
          }));

            var container = svg.append("g")
                            .classed("node-area", true)
                            .attr("id", "test");

I'm using container.node().getBBox().width to get those values and I always receive 70 px width 30 px height no matter what.

console.log("width: "+container.node().getBBox().width+" height: "+container.node().getBBox().height+ "x: "+container.node().getBBox().x+" y: "+container.node().getBBox().y);

I am following d3.js force layout auto zoom/scale after loading TWiStErRob answer

getBoundingClientRect would seem to be what you want. That should get you something in outer co-ordinates. — Robert Longson, Jul 08 '16 at 20:24
@RobertLongson container.getBoundingClientRect().x; doesn't find a function error for some reason — Higeath, Jul 08 '16 at 20:39
because container is a d3 node and not an element. I think you want container[0] or maybe container[0][0] — Robert Longson, Jul 08 '16 at 20:41
@RobertLongson It seems to be working fine in chrome console but when using it in code console.log( container[0][0].getBoundingClientRect().width); it gives me same values as getBBox() so 70px etc in console container.node().getBBox().width seems to be working as well it just doesnt work in code — Higeath, Jul 08 '16 at 20:48

score 0 · Answer 1 · answered Jul 09 '16 at 02:13

0

@RobertLongson suggestion does work. In the code, getBoundingClientRect().width has to be used after the transform:

function zoomed() {
    container.attr("transform", "translate(" + d3.event.translate 
    + ")scale(" + d3.event.scale + ")");
    console.log("width: "+container.node().getBoundingClientRect().width);
};

Check the console in this fiddle, while you apply zoom: http://jsfiddle.net/gerardofurtado/tr4kx4af/

answered Jul 09 '16 at 02:13

Gerardo Furtado

100,839
9
121
171

(PS: this fiddle is not mine, I just googled any fiddle with zoom and added the `concole.log` line.) – Gerardo Furtado Jul 09 '16 at 02:14
it seems to be working after zoom but I would want to get those values initially to scale screen to fit my svg – Higeath Jul 09 '16 at 10:34
Adding transform container.attr("transform", "translate(0,0)scale(1)"); before console.log doesn't work either it has to be a zoomed() – Higeath Jul 09 '16 at 11:35

Get size of svg g of element

1 Answers1