Javascript d3.js-如何水平展开力定向图？

我正在处理d3中的一个节点图（如图所示：）该图本身是非常圆形的（链接/节点在各个方向上分布相对均匀）-如何使其更好地适合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);
    });

});

---

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

当然，您可以手动“破解”布局以实现您想要的功能——例如，您可以为每个链接指定不同的链接距离/强度，以便您想要更大的链接更弱。类似地，您可以指定一个电荷函数，将较弱的排斥电荷分配给要靠近的节点

---

然而，对于所有这些，您需要非常好地了解图形完成后的外观。完全放弃强制布局可能会更容易，只需自己指定节点的位置。

您可以轻松地压缩图表，使其更适合16:9

9/16是

.5625

。在这里，您只需查找包含

.5625

的行，这就是压缩图表所需的全部内容

在另一张图中，你们可以看到你们的图完全粉碎了，常数更小

---

因为这个图看起来有点混乱，所以对于你的情况来说，最好的常数应该是0.4左右。那样的话，16:9的比赛就更加确定了。

谢谢你的帮助-我应该好好看看我希望最终结果如何，就像你说的那样。我可能确实想要强制布局。这假设默认布局是正方形，但事实并非如此。特别是，尺寸会影响初始放置和重力。虽然这种方法可能适用于这个特定的示例，但通常不会——在图形实际上可以拉伸的情况下（例如，一系列节点），这会将节点挤压到图形的顶部。@Lars您能详细介绍一下“将节点挤压到顶部”吗？我的示例不操纵垂直维度。你能提供说明你的陈述的工作例子吗？考虑两个节点，没有挤压。节点位于布局的中间。现在考虑一下。节点被推入SVG的顶部，底部为空。这就是我的意思。本质上，您所做的是强制SVG的一部分（在本例中为y维度的1-0.5625）为空，因为最高y坐标通过乘法映射到其下方的最大值。这就像你在坐标上应用一个比例。使用多焦点部队布局示例中的方法（只需谷歌搜索该短语），你可能会想做什么就做什么，但就你的情况而言，这可能最终与部队布局发生冲突，产生意想不到的奇怪结果。（我曾经试过类似的方法。）所以我认为拉尔斯·科托夫对部队布局的看法是正确的。但是，您可能需要查看。我从来没有试过，但它看起来会让你更容易做你想做的事。