放大樹的佈局保留根節點的位置

我對d3相當陌生，並且在縮放和拖拽樹形佈局時遇到問題。放大樹的佈局保留根節點的位置

編輯：從意見

我已經創建了一個樣本，的jsfiddle here更新的jsfiddle的信息。

我的問題是在變焦功能：

function zoom() { 
     var scale = d3.event.scale, 
      translation = d3.event.translate, 
      tbound = -height * scale * 100, 
      bbound = height * scale, 
      lbound = (-width + margin.right) * scale, 
      rbound = (width - margin.bottom) * scale; 
     console.log("pre min/max" + translation); 
     // limit translation to thresholds 
     translation = [ 
     Math.max(Math.min(translation[0], rbound), lbound), 
     Math.max(Math.min(translation[1], bbound), tbound)]; 
     console.log("scale" + scale); 
     console.log("translation" + translation); 
     d3.select("g") 
      .attr("transform", "translate(" + translation + ")" + 
      " scale(" + scale + ")"); 
    }

如果您展開和摺疊節點，然後嘗試拖動，根節點一直追溯到左上角。我添加了一些日誌記錄，顯示在這種情況下translation的值是-1，-1

有沒有一種方法可以保留當前的根節點位置？

來源

2013-12-17 mrkb80

這方面有很多問題，例如： [這裏]（http://stackoverflow.com/questions/17405638/d3-js-zooming-and-panning-a-collapsible-tree-diagram）和[這裏]（http://stackoverflow.com/questions/18785896 /如何-可以-I-附加縮放到所述-D3-可摺疊樹的例子）。你能看看這些解決你的問題嗎？ –

謝謝。我實際上使用[這個答案]（http://stackoverflow.com/questions/20543127/d3-collapse-tree-zoom-and-pan-jumpiness-after-clicking-a-node?rq=1）並移動縮放函數在更新之外，但是第一次移動樹時，我仍然有問題。任何想法爲什麼？（更新的JSFiddle問題） – mrkb80

問題是您正在翻譯的縮放行爲的g元素將使用非零翻譯進行初始化。縮放行爲不知道這一點，導致你看到的「跳躍」。要解決此問題，請使用該翻譯對縮放行爲進行初始化。

var zb = d3.behavior.zoom().scaleExtent([0.5, 5]).on("zoom", function() { 
     zoom(); 
    }); 
zb.translate([margin.left, margin.top]);

完整示例here。

來源

2013-12-18 18:14:53

非常感謝您的幫助。非常有意義。 – mrkb80

放大樹的佈局保留根節點的位置

回答

相關問題