調整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。