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调整大小并拖动

回答

相关问题