D3 力布局中的动态链接距离

Question

我已经实现了 d3 的力布局。然而对我来说，问题是布局没有在屏幕上传播。以下是截图：

我希望节点以动态链接距离分布在屏幕上，因为右侧和左侧有很多空白区域。我尝试将链接距离随机化如下：

d3.layout.force()
    .charge(-800)
    .linkDistance(function(d){
        return (Math.random() * (400 - 200) + 1);
    })
    .size([w, h]);

这增加了链接距离，但也增加了垂直方向。我尝试设置 linkStrength() 属性，但它对我不起作用。如何使此布局仅在水平方向上分布在整个区域？有没有一种方法可以定义链接距离以适合我页面的矩形区域？

Answer 1

我看到的一个解决方案是使用this bounding box example 以矩形/水平方式绑定您的绘图，然后将电荷设置为非常高的水平（目标为 -10000，类似这样），以便节点分布在它们的在被您设置的界限停止之前的最大值。然后，您可以选择将文本设置在节点的右侧或左侧，具体取决于其位置，这样它就不会被剪切。或者你也可以绑定文本。