Начисление в зависимости от размера — расстановка силы d3

Я пытаюсь создать граф, ориентированный на силу, используя d3.layout.force, и мне нужно, чтобы размер контейнера изменялся, то есть я хотел бы иметь возможность рассчитать соответствующие значения заряда и linkDistance на основе размера или сделать это для меня d3 в каким-то волшебным образом.

Я попытался (ссылка: http://jsfiddle.net/VHdUe/6/ ), который использует только узлы. Я устанавливаю заряд на значение, основанное на количестве узлов, которые будут соответствовать радиусу круга, к которому он имеет форму.

Решение работает для некоторых контейнеров среднего размера, но если вы несколько раз щелкнете изменить размер, вы увидите, что оно не работает для всех размеров...

Единственный путь вперед, который я вижу, — это использовать масштабное преобразование svg, которое испортит размер моих элементов в неблагоприятном свете. Любые другие варианты?

PS: я видел http://mbostock.github.com/d3/talk/20110921/bounding.html (ответ на принудительно направленный макет D3 с ограничивающей рамкой), но я предпочел бы решение, основанное на гравитации, чем решение с ограничивающей рамкой.


d3.js graph force-layout
person XwipeoutX    schedule 28.03.2012    source источник
comment
bl.ocks.org/mbostock/1129492   -  person weltschmerz    schedule 27.01.2016

Ответы (1)


arrow_upward
21
arrow_downward

Помимо платы и linkDistance, у вас также есть гравитация. Если вы хотите, чтобы график сохранял ту же относительную плотность по отношению к размеру макета, вам нужно масштабировать как заряд, так и гравитацию. Это две основные вычислительные силы, которые определяют общий размер большого двоичного объекта. Подробности см. в моем форс-макете.

Я попробовал несколько разных версий, и эта, похоже, работала довольно хорошо:

var k = Math.sqrt(nodes.length / (width * height));

layout
    .charge(-10 / k)
    .gravity(100 * k)

Здесь nodes.length / (width * height) линейно пропорционально плотности графа: площадь узлов, деленная на площадь макета. Сила заряда подчиняется закону обратных квадратов, что может объяснить, почему работает квадратный корень. Что ж. «Гравитация» D3 — это виртуальная пружина, линейно масштабирующаяся с расстоянием от центра компоновки, поэтому она также увеличивает гравитацию по мере того, как граф становится более плотным, и препятствует выходу узлов из ограничивающей рамки.

person mbostock    schedule 29.03.2012
comment
Это выглядит фантастически, определенно достаточно хорошо, чтобы покрыть наши дела. Я также расширю его для разумных расстояний связи, но это должно быть просто. Спасибо! - person XwipeoutX; 03.04.2012
comment
@XwipeoutX, не могли бы вы поделиться эвристикой, которую вы используете для настройки расстояния между ссылками? Благодарность! - person skyork; 29.07.2013
comment
Извините, @skyork - в итоге мы отказались от поддержки графа, направленного силой, в том, что мы делали, поэтому у меня нет ничего для вас. Данные, которые мы использовали, на самом деле не годились ни для чего, кроме «о, это выглядит блестяще», поэтому, к сожалению, я не тратил на это слишком много времени. - person XwipeoutX; 30.07.2013