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分析了这个标准的力导向示例，以显示可以完成的一种方式 - ＆gt; 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/