D3 力定向布局在 X 轴上分布答案

【问题标题】：D3 force directed layout distribute across X axisD3 力定向布局在 X 轴上分布
【发布时间】：2014-05-14 13:56:54
【问题描述】：

使用 D3 force layout 绘制图表我注意到结果总是倾向于圆形。但是水平边距有很多空白空间。我的问题 - 如何允许布局分布对象的宽度大于高度。我的天真尝试只是修改tick 以降低y 的费率（0.99）失败了：

    function tick() {
      path.attr("d", linkArc);
      circle
        .attr("cx", function(d) { 
            return d.x = Math.max(R, Math.min(width - R, d.x)); }) 
        .attr("cy", function(d) { 
            return d.y = Math.max(R, Math.min(height - R, d.y*0.99)); }); 

      text.attr("transform", transform);
    }

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

控制循环放置的参数是.gravity()。这种力将节点拉向中心。您可以通过将值设置为 0 来禁用它。如果这样做，您应该使用其他东西来确保节点不会离开画布，例如如this example。

【讨论】：

【解决方案2】：

你说得对，这个功能的关键代码应该在pick()中。

我没有您示例的所有代码，但我将向您展示 2 个在 X 和 Y 轴上实现不同行为的示例。

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

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

【讨论】：