拖拽和縮放有界的力佈局d3

Question

我想拖動和縮放界限中的力佈局。 請檢查這個link 這裏的節點集中在佈局，但我怎麼可以在界內拖動。 我甚至嘗試過這樣的一些東西

nodes.attr("cx", function(d) { 
    return d.x = Math.max(60, Math.min($(window).width() - 60, d.x)); 
}) 
.attr("cy", function(d) { 
    return d.y = Math.max(60, Math.min($(window).height() - 60, d.y)); 
}); 

但它不起作用。

Answer 1

完成：

node.attr("transform", function(d) { 
     //Here i create a node radius so it doesnt go offscreen 
     var nodeRadius = d.weight * 2 + 12 

     //here I do checks to see if it goes offscreen 
     if(d.x<= nodeRadius){ 
      d.x = nodeRadius; 
      } 
     if(d.y<= nodeRadius){ 
      d.y = nodeRadius; 
      }7 
     if(d.x>width - nodeRadius){ 
      d.x = width - nodeRadius; 
      } 
     if(d.y>height - nodeRadius){ 
      d.y = height - nodeRadius; 
      } 

     return "translate(" + d.x + "," + d.y + ")"; 

    }); 

這在tick function完成的，所以它會檢查每一幀。我創建了一個實際的滴答函數，因此它是可重用的。請檢查我的JSFiddle中的更改，因爲我已經做了很多。但一切似乎都很好。

更新小提琴：http://jsfiddle.net/aVhd8/177/

如果你想開始之前那麼邊界必須記住，移動到移動節點：

node.attr("transform", function(d) { 
     //Here i create a node radius so it doesnt go offscreen 
     var nodeRadius = d.weight * 2 + 12 

     //here I do checks to see if it goes offscreen 
     if(d.x<= nodeRadius-movement){ //have to take movement away as you have moved the nodes/links previously 
      d.x = nodeRadius-movement; 
      } 
     if(d.y<= nodeRadius){ 
      d.y = nodeRadius; 
      } 
     if(d.x>width - nodeRadius-movement){ 
      d.x = width - nodeRadius-movement; 
      } 
     if(d.y>height - nodeRadius){ 
      d.y = height - nodeRadius; 
      } 

     return "translate(" + d.x + "," + d.y + ")"; 

    }); 

注意這裏我已經把movement考慮。您還需要對各環節上做到相同的：

的jsfiddle：http://jsfiddle.net/aVhd8/180/

Answer 2

在此請看：http://bl.ocks.org/mbostock/6123708

在該示例邁克實現縮放行爲一起拖/放行爲。