拖拽和缩放有界的力布局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

在该示例迈克实现缩放行为一起拖/放行为。