调整 D3 强制布局大小

Question

在d3.js中，是否可以调整力导向图的大小？例如，我有一个已定义的布局

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

force.start();

我希望你能在项目后期调整大小，这可行吗？

- jcmitt

---

你尝试过重置 .size() 吗？ - Lars Kotthoff

我尝试了 force.size([newWidth, height]).start(); 但没有成功... - jcmitt

请注意，增加布局的大小并不意味着会使用额外的空间。您有什么具体的使用案例吗？ - Lars Kotthoff

您还需要调整容器的大小。 - Lars Kotthoff

根据文档 ，大小实际上不影响节点的位置。您必须自己强制执行任何硬约束。 - Lars Kotthoff

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 force 调整大小的示例，点击此处查看。

- Dmitry

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

- Lars Kotthoff