d3.js Силовая компоновка применяется только вертикально

Question

Я делаю визуализацию данных с помощью d3. Чтобы дать вам некоторый контекст,

• граф содержит около 400 узлов (все данные загружаются из множественного JSon файлов), которые соединены друг с другим
• все они отображенных в году в сроках (ось х)
• положение по оси у полностью рандомизированное
• узлы имеют все разные размеры

Теперь мой вопрос:
Как я могу распределять узлы по оси y, чтобы они не перекрывались?

Вы можете проверить полный код источника на GitHub Repository (работа в progess - в настоящее время на ветке real-database).

Это скриншот того, как она в данный момент выглядит:

Answer 1

В принципе, в функции клеща(), сбросить массив узлов х значения, что вы хотите, чтобы они были (предположительно некоторые масштаб делать с годом), а узел и ссылки будут нарисованы при тех значениях х, и последующие вычисления силы будут начинаться с этих значений слишком

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, лучше всего сначала дать им немного места для маневра (т. диапазон в х, который они содержат, а не значение), затем медленно сузить этот диапазон вниз. В противном случае узлы будут «застревать» друг за другом.

Edit 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])); 
}); 

...

Теперь мы можем ограничить й положение точки привязки каждого узла, как это:

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

(Как я уже говорил, если у вас есть много узлов и несколько лет, вы бы лучше ограничения на диапазон, а затем сужение этого диапазона вниз на каждый последующий тик)

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