Get size of svg g des Elements

Question

Wie Sie hier Element g http://imgur.com/SZImQNB mit verschiedenen Browser Zoomstufen sehen können. Ich würde gerne die Werte 402x398 und 1608x1582 oder was auch immer die Werte beim Zoomen sein würden.

var container - ist die svg g, die ich für Abmessungen von

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"); 

Ich verwende container.node Suche() getBBox() Breite, diese Werte zu erhalten und ich erhalte immer 70 Pixel Breite.. 30 px Höhe egal was.

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

ich d3.js force layout auto zoom/scale after loading folgende bin

Answer 1

@RobertLongson Vorschlag TWiStErRob zu beantworten funktioniert. Im Code hat getBoundingClientRect().width nach der Transformation verwendet werden:

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

Überprüfen Sie die Konsole in dieser Geige, während Sie Zoom gelten: http://jsfiddle.net/gerardofurtado/tr4kx4af/