d3.js部队布局仅垂直应用

Question

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

• 该图表包含大约400个节点(所有数据都是从多个json文件中加载的)，这些节点相互连接。
• 它们都是按年在一个时间线(x轴)中映射的。
• Y轴的位置是完全随机的。
• 节点大小各不相同

现在我的问题是：

如何将节点分布在y轴上，使它们不重叠？

您可以在GitHub仓库上签出完整的源代码(工作正在进行中--目前在real-database分支上)。

这是一张屏幕截图，展示了它目前的样子：

​

​

Answer 1

基本上，在抽签()函数中，将节点数组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/

如果你有很多项目和很少离散的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/