調整D3力布局的大小

Question

是否可以在d3.js中調整力布局的大小？ 例如，我有一個定義的布局

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

force.start();

我希望稍后在項目中重新調整大小。 這可能嗎？

Answer 1

不久，在調整大小事件時，您應該更改svg對象的屬性（它也會改變重心）並恢復力計算：

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

這里提供了d3強制調整大小的示例。

Answer 2

根據文檔 ，力布局的.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)); });
}