d3.js - 如何水平扩展力指向图？

我正在研究d3中的一个节点图（见这里：http://jsfiddle.net/u56Tr/1）图本身是非常圆形的（链接/节点在所有方向上分布相对均匀） - 我如何在16：9窗口？我想我不得不扩大元素的x，y位置，但我不太清楚。d3.js - 如何水平扩展力指向图？

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

});

来源

2014-01-08 lwansbrough

使用多焦点力布局示例中的方法（只是Google这个词组）可以做到你想要的，但是对于你的情况来说，这最终可能会与力布局作斗争，产生意想不到的结果。（我曾试过这样的事情。）所以我认为Lars Kotthoff对于部队布局是正确的。不过，你可能想看看[可乐布局]（http://marvl.infotech.monash.edu/webcola/）。我从来没有尝试过，但它看起来会让你更容易做到你想要的。 – Mars

力布局的点是自动布局像这样的图表，让你不必指定节点自己的位置。它在很大程度上受节点间连接的影响。由于其高连接性，您拥有的图形无法很好地以宽屏幕格式进行布局 - 也就是说，许多节点连接到许多其他节点。如果您要拉伸图表，某些链接会比其他链接更长，并且某些节点会比其他节点靠得更近 - 这正是力布局所预防的。

您当然可以手动“破解”布局以达到您想要的效果 - 例如，您可以为每个链接指定不同的链接距离/强度，以便您希望更大的链接距离/强度更弱。同样，您可以指定一个收费函数，将较弱的斥力电荷分配给您想要更靠近的节点。

但是，对于所有这些，你需要一个非常好的想法，看看你完成后图表的样子。将力布局完全抛弃并简单地指定节点的位置可能会更容易。

来源

2014-01-08 21:39:51

感谢您的帮助 - 我应该更好地了解我希望最终结果如您所说。毕竟，我可能确实需要强制布局。 – lwansbrough

你可以很容易地挤压图表以更好地适应16：9。

9/16是.5625。在此fiddle中，您只需查找包含.5625的行，即可获取所需的所有图表。

而在这另一fiddle你可以看到你的图完全粉碎，较小的常数。 :)。

由于图有一点混乱的外观，也许你的情况良好的常数约为0.4。这样它将更加确定地适合16：9。

来源

2014-01-08 23:26:08 VividD

这假设默认的布局是一个正方形，但情况并非如此。特别是，尺寸影响初始放置和重力。虽然这种方法可能适用于这个特定的例子，但它通常不会 - 在图表实际上可伸缩的情况下（例如一串节点），这会将节点挤入图的顶部。 –

@Lars您能否详细说明“将节点挤入顶部”？我的例子不操纵垂直维度。你能提供说明你的陈述的实例吗？ – VividD

考虑[这个简单的例子]（http://jsfiddle.net/Wt6Wv/8/）与两个节点，并没有挤压。节点位于布局的中间。现在考虑[与挤压相同的例子]（http://jsfiddle.net/Wt6Wv/9/）。节点被推入SVG的顶部，底部为空。这就是我的意思。基本上你所做的就是强制SVG的一部分（在这种情况下，y维的1-0.5625）是空的，因为最高的y坐标被乘法映射到低于它的最大值。这就好像您正在将坐标应用于坐标。 –

d3.js - 如何水平扩展力指向图？

回答

相关问题