调整 D3 力布局的大小答案

【问题标题】：Resizing D3 force layout调整 D3 力布局的大小
【发布时间】：2013-10-10 17:59:43
【问题描述】：

是否可以在 d3.js 中调整强制布局的大小？例如，我有一个由

定义的布局

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

force.start();

我希望稍后在项目中调整它的大小。这可能吗？

【问题讨论】：

你试过重置.size()吗？
我试过force.size([newWidth, height]).start(); 无济于事...
请注意，增加布局的大小并不意味着会使用额外的空间。您对此的具体用例是什么？
我在一页上有几个项目，当专注于其他布局之一时，我希望强制布局缩小。
您还必须调整容器的大小。

标签： javascript d3.js resize force-layout

【解决方案1】：

简而言之，在调整大小事件中，您应该更改 svg 对象的属性（它也会更改重心）并恢复力计算：

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

d3 force 调整大小的示例是provided here。

【讨论】：

【解决方案2】：

根据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)); });
}

【讨论】：