D3.js調整大小並拖動

我正在用D3繪製一棵樹。當頁面調整大小時，我想將樹移動到一個特定的位置（基本上爲svg留下的空間，使樹保持可見）。我使用此代碼D3.js調整大小並拖動

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

如何解決這個任何暗示？

來源

2017-04-04 noizer

使'變種變焦= d3.behavior.zoom（）上（「縮放」時，重繪）;'。一個全局變量並在兩個地方使用'....調用（縮放）'並在調整大小功能 – Cyril

測試該解決方案。它很棒！請添加它作爲未來reades的答案 – noizer

製作放大一個全局變量是這樣的：

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

，並調整大小使用它，如下圖所示放大SVG的。

變化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]); 
     }

來源

2017-04-04 10:33:46 Cyril

D3.js調整大小並拖動

回答

相關問題