2016-07-08 6 views
0

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.Get size of svg g des Elements

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

+1

getBoundingClientRect scheint zu sein, was Sie wollen. Das sollte dir etwas in äußeren Koordinaten bringen. –

+0

@RobertLongson container.getBoundingClientRect(). X; findet keinen Funktionsfehler aus irgendeinem Grund – Higeath

+0

, weil Container ein d3-Knoten und kein Element ist. Ich denke, Sie möchten Container [0] oder vielleicht Container [0] [0] –

Antwort

0

@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/

+0

(PS: diese Geige ist nicht meins, ich habe nur jede Geige mit Zoom gegoogelt und die 'concole.log' Zeile hinzugefügt.) –

+0

scheint nach dem Zoom zu arbeiten, aber ich möchte diese Werte zunächst skalieren Bildschirm zu passen my svg – Higeath

+0

Hinzufügen transform container.attr ("transformieren", "übersetzen (0,0) Maßstab (1)"); bevor console.log nicht funktioniert, muss es auch ein Zoom sein() – Higeath