D3.js Größe ändern und ziehen

Question

Ich zeichne einen Baum mit D3. Wenn die Größe der Seite geändert wird, möchte ich den Baum an eine bestimmte Position verschieben (im Prinzip auf der linken Seite für die Svg, damit der Baum sichtbar bleibt). Ich benutze diesen Code

function resize() { 
      svg 
       .attr("width", getWidth()) 
       .attr("height", getHeight()); 
      svg.attr("transform", "translate(" + (window.innerWidth/3) + "," + ((window.innerHeight/3)) + ")" + " scale(1)"); 
      var zoom = d3.behavior.zoom(); 
      zoom.translate([window.innerWidth/3, window.innerHeight/3]); 
     } 
d3.select(window).on('resize', resize); 

Dies funktioniert gut, aber wenn ich auf Start um die Grafik zu ziehen, wird es in die ursprüngliche Position als Ausgangsschlepppunkt bewegt. Dies ist die Drag-Funktion:

function redraw() { 
     if (!d3.event.sourceEvent) return; 
     d3.event.sourceEvent.stopPropagation(); 
     svg.attr("transform", 
      "translate(" + d3.event.translate + ")" + 
      " scale(" + d3.event.scale + ")"); 
    } 

var svg = d3.select("#graph").append("svg") 
     .attr("id", "graph") 
     .attr("width", getWidth()) 
     .attr("height", getHeight()) 
     .call(zm = d3.behavior.zoom().on("zoom", redraw)).on("dblclick.zoom", null) 
     .append("g") 
     .attr("transform", "translate(" + initialWidth + "," + initialHeight + ")"); 

Jeder Hinweis, wie diese zu lösen?

Answer 1

Machen Sie eine globale Variable wie diese heran:

var zoom = d3.behavior.zoom().on("zoom", redraw); 

und es in Resize verwenden und für svg heran wie unten gezeigt.

Änderung 1:

var svg = d3.select("#graph").append("svg") 
     .attr("id", "graph") 
     .attr("width", getWidth()) 
     .attr("height", getHeight()) 
     .call(zoom).on("dblclick.zoom", null) 
     .append("g") 
     .attr("transform", "translate(" + initialWidth + "," + initialHeight + ")") 

Change 2:

function resize() { 
      svg 
       .attr("width", getWidth()) 
       .attr("height", getHeight()); 
      svg.attr("transform", "translate(" + (window.innerWidth/3) + "," + ((window.innerHeight/3)) + ")" + " scale(1)"); 
      zoom.translate([window.innerWidth/3, window.innerHeight/3]); 
     }