D3.js 力導向圖的拖拽（drag）與縮放（zoom）

不知道大家會不會跟我一樣遇到這樣的問題，在之前做的力導向圖的基礎上加上縮放功能的時候，拖動節點時整體會平移不再是之前酷炫的效果（失去了拉扯的感覺！）。天啊，簡直不能接受如此丑X的效果。經過不懈的努力終於解決了這個問題。
以下是事情發生的原因及解決的代碼：

var zoom = d3.behavior.zoom()  
            .scaleExtent([1, 10])  //縮放范圍
            .on("zoom", zoomed);  
  
function zoomed() {  
    container.attr("transform",    //此處的container是之前svg下 append('g')后返回的對象
        "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");  
}  
var container = svg.append("g")   //相當於縮放的容器
                   .call(zoom); 

加入以上的代碼后，縮放的功能是實現了。但是，拖動節點的時候 不再有力拉動的感覺 而是整個圖的平移。（如下圖）
 

 我們理想中的拖動效果不應該和縮放效果沖突，所以又去重新看了官網的例子
猜測可能是
 

 這邊定義的是縮放加整個的平移 所以拖動的時候 是整個力導向圖的平移。

 

根據官網的例子調整了下代碼：
定義drag時調用的方法：

 

 對應的方法：
 

調用拖拽函數：

 

更新后調用的示例：