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

Question

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

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

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

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

Answer 1

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