D3.jsサイズ変更とドラッグ

Question

私はD3でツリーを描いています。ページのサイズが変更されると、ツリーを特定の位置に移動したい（基本的には、ツリーが表示されたままになるように、svgのために残されたスペースに）。 私はこのコード

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

を使用これは正常に動作しますが、私は、グラフをドラッグしてクリック起動したときに、それをドラッグ出発点として、元の位置に移動します。

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

これを解決する方法上の任意のヒント： これは、ドラッグ機能ですか？

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

と、以下のようにSVGのためのリサイズとズームで、それを使用します。

Answer 1

メイクは、このようなグローバル変数をズーム。

変更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 + ")") 

変更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]); 
     }