d3.js 强制布局仅垂直应用

Question

我正在使用 d3 进行数据可视化。为了给你一些背景，

• 该图包含大约 400 个节点（所有数据均从多个 json 文件）相互连接
• 它们都在时间轴（x 轴）中按年份绘制
• y 轴上的位置是完全随机的
• 节点大小不同

现在我的问题是：
如何在 y 轴上分布节点以使它们不重叠？

您可以在 GitHub Repository 上查看完整的源代码（正在进行中 - 目前在 real-database 分支上）。

这是当前外观的屏幕截图：

Answer 1

基本上，在 tick() 函数中，将节点数组 x 值重置为您希望它们的值（可能与年份有关），节点和链接将在这些 x 值处绘制，随后力计算也将从这些值重新开始

force.on("tick", function() {

    // Adjust to what you want nodePos to be, here I'm just doing it by index
    graph.nodes.forEach (function(nodePos,i) {
        nodePos.x = i * 15;
        //nodePos.x = xscale (data[i].year); // or whatever
     })

   // then normal node/link layout

我已经通过 blt909 分叉了这个标准的强制导向示例，以展示它可以完成的一种方式 --> http://jsfiddle.net/vztydams/

PS 如果您有很多项目并且离散的 x 值很少，最好先给它们一些回旋余地（即它们包含在 x 中的范围而不是一个值），然后慢慢缩小范围范围下降。否则节点将“卡在”彼此后面。

编辑 02/03/16：

嗨，Alvaro，本质上，graph.nodes 是您的链接数据，因为这些对象作为数据附加到显示的节点。

因此，如果我设置一个比例，并在每个数据中随机选择一年：

var dom = [1994,2014];
var xscale = d3.scale.linear().domain(dom).range([20,400]);
graph.nodes.forEach (function(datum) {
    datum.year = dom[0] + Math.floor (Math.random() * (dom[1] - dom[0]));
});

...

然后我们可以像这样限制每个节点的基准的 x 位置：

graph.nodes.forEach (function(d,i) {
    //d.x = i * 15;
    d.x = xscale(d.year);
})

（正如我所说，如果您有很多节点和几年，您最好限制在一个范围内，然后在每个后续滴答中缩小该范围）

http://jsfiddle.net/vztydams/2/