Ориентация графика и позиционирование узлов в d3.js

Благодаря этому более раннему вопросу я создал статический график с фиксированной компоновкой, как показано ниже, используя принудительную компоновку в d3.js:

введите здесь описание изображения

и у меня есть два конкретных вопроса для дальнейшей настройки макета:

Во-первых, я замечаю, что детерминированная инициализация позиций узлов (например, сделанная здесь по диагонали, подробности см. в скрипте) фиксирует позиции узлы, и ориентация узлов, по-видимому, зависит от этой инициализации, а также от размеров графа силы*. Интересно, как сделать так, чтобы узлы A, D, E, F, I на приведенном выше графике выровнялись по горизонтали? Другими словами, я хочу повернуть ориентацию графика против часовой стрелки примерно на 45 градусов. Я попытался инициализировать узлы горизонтально посередине:

nodes.forEach(function(d, i) { d.x = w / size * i; d.y = h / 2; });

но произведенный вывод имеет все узлы и ребра горизонтально в том месте, где они были инициализированы.

Во-вторых, правда ли, что график силы автоматически центрируется внутри элемента svg? Если нет, то как мы можем сделать это так? Если да, то как мы можем указать центр графика силы в элементе svg?

(* Примечание: как ни странно, при установке .size([w, h]), где w = h для графа силы, и детерминированной инициализации узлов по диагонали все узлы и ребра располагаются по этой диагонали в выходных данных, почему?)


javascript svg d3.js graph force-layout
person MLister    schedule 10.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте добавить пользовательскую силу гравитации, применяемую к каждому тику, которая притягивает узлы к горизонтальной линии. Что-то вроде этого:

force.on('tick', function(e) {
  nodes.forEach(function(d) {
    d.y += (height/2 - d.y) * e.alpha;
  });
})

На ваш второй вопрос, я полагаю, он не центрирован, но по умолчанию есть небольшая сила тяжести, которая тянет узлы к центру.

person Ilya Boyandin    schedule 17.01.2014