d3.js - 如何水平扩展力有向图？

Question

我正在处理 d3 中的节点图（参见此处：http://jsfiddle.net/u56Tr/1）该图本身是非常圆形的（链接/节点在各个方向上相对均匀地分布） - 我如何使它更适合 16 :9 窗口？我假设我必须扩展元素的 x,y 位置，但我不能完全正确。

相关D3代码：

force.on("tick", function() {
link.attr("x1", function(d) {
    return d.source.x;
})
    .attr("y1", function(d) {
        return d.source.y;
    })
    .attr("x2", function(d) {
        return d.target.x;
    })
    .attr("y2", function(d) {
        return d.target.y;
    });
node_bg.attr("cx", function(d) {
    return d.x;
})
    .attr("cy", function(d) {
        return d.y;
    });
node.attr("x", function(d) {
    return d.x - (d.group > 0 ? 24 : 32);
})
    .attr("y", function(d) {
        return d.y - (d.group > 0 ? 24 : 32);
    });

});

Answer 1

您可以轻松压缩图表以更好地适应 16:9。

9/16 是.5625。在这个fiddle 中，您只需查找包含.5625 的行，这就是压缩图表所需的全部内容。

在另一个fiddle 中，您可以看到您的图表完全被破坏了，并且常数更小。 :) .

由于图表看起来有点混乱，因此适合您的情况的最佳常数可能是 0.4 左右。这样它会更确定地适合 16:9。

Answer 2

强制布局的重点是自动布局这样的图形，这样您就不必自己指定节点的位置。它如何做到这一点在很大程度上受到节点之间的连接的影响。您所拥有的图表不适合以宽屏幕格式进行布局，因为它的连接性很高——也就是说，许多节点连接到许多其他节点。如果您要拉伸图形，一些链接会变得比其他链接长得多，而一些节点会比其他节点更靠近 - 这正是力布局所阻止的。

您当然可以手动“修改”布局以实现您想要的效果 - 例如，您可以为每个链接指定不同的链接距离/强度，以便您想要更大的链接更弱。同样，您可以指定一个电荷函数，将较弱的排斥电荷分配给您想要更靠近的节点。

但是，对于所有这些，您需要很好地了解您希望图表在完成后的样子。完全放弃力布局并简单地自己指定节点的位置可能会更容易。