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

});

- iLoch

---

可能可以使用多焦点力布局示例中的方法来实现您想要的内容（只需在Google中搜索该短语），但对于您的情况，这可能会与力布局相互抵触，产生意外的怪异结果。（我曾经尝试过类似的事情。）所以我认为Lars Kotthoff关于力布局的看法是正确的。然而，您可能需要查看cola布局。我从未尝试过它，但它看起来会使您想要的内容更容易实现。 - Mars

Answer 1

您可以轻松地压缩图表以更好地适应16:9的比例。9/16是0.5625。在这个fiddle中，您只需要查找包含0.5625的线条，这就是您需要压缩图表的全部内容。在这个另一个fiddle中，您可以看到您的图表完全被压缩了，有更小的常数。 :)。由于图表看起来有些混乱，也许对于您的情况，好的常数大约为0.4。这样它将更有把握地适应16:9。

- VividD

---

这假设默认布局是正方形，但实际情况并非如此。特别是，大小会影响初始位置和重力力量。虽然这种方法可能适用于这个特定的例子，但在一般情况下不会 -- 在图形实际上可以被拉伸的情况下（例如节点串），这将把节点挤压到图形的顶部。 - Lars Kotthoff

@Lars你能详细解释一下"将节点挤入顶部"的含义吗？我的例子并没有操纵垂直维度。你能否提供一个工作示例来说明你的说法？ - VividD

考虑这个简单的例子，其中有两个节点且没有压缩。这些节点位于布局的中间。现在考虑同样的例子，但加入了压缩。节点被推到SVG的顶部，底部为空。这就是我的意思。本质上，你所做的是强制SVG的一部分（在这种情况下为y维度的1-0.5625）为空，因为最高的y坐标通过乘法映射到其下面的最大值。这就像你正在对坐标应用比例尺。 - Lars Kotthoff

Answer 2

力导向布局的目的是自动布置图形，使您不必手动指定节点位置。它的实现方式很大程度上受到节点之间连接的影响。由于高度互连性，您所拥有的图形不太适合在宽屏幕格式中进行布局。如果您拉伸图形，一些链接会比其他链接更长，一些节点会比其他节点更接近 - 这正是力导向布局要避免的。

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

但是，所有这些都需要您对最终图形的外观有相当好的想法。放弃力导向布局并直接指定节点位置可能更容易。

- Lars Kotthoff

---

谢谢你的帮助 - 正如你所说，我应该更好地考虑一下最终结果的样子。我可能确实想要强制布局。 - iLoch