调整D3力布局

Question

是否可以在d3.js中调整力布局的大小？例如，我有

var force = d3.layout.force() 
.nodes(documents.nodes) 
.linkDistance(0) 
.friction(.2) 
.size([width, height]); 

force.start(); 

定义的布局，我希望在项目后期调整其大小。这可能吗？

Answer 1

根据the documentation，力布局的.size()参数仅影响节点的重心和初始分布的重心，而不影响可用空间。您必须自己执行任何约束，例如在tick功能：

force.on("tick", function() { 
    node.attr("cx", function(d) { return Math.min(maxX, Math.max(minX, d.x)); }) 
     .attr("cy", function(d) { return Math.min(maxY, Math.max(minY, d.y)); }); 
} 

Answer 2

不久，在一个调整大小事件，你应该改变你的SVG对象的属性（也改变重心）和恢复力的计算：

window.onresize = function() { 
    width = window.innerWidth, height = window.innerHeight; 
    svg.attr('width', width).attr('height', height); 
    force.size([width, height]).resume(); 
}; 

调整大小的示例为provided here。