Зарядка на основе размера - d3 force layout

Question

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

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

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

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

PS: Я видел http://mbostock.github.com/d3/talk/20110921/bounding.html (ответ D3 force directed layout with bounding box), но я предпочел бы решение на основе гравитации, чем ограничивающее поле.

Answer 1

В дополнение к charge и linkDistance у вас также есть gravity. Если вы хотите, чтобы график поддерживал ту же относительную плотность, что и размер макета, вам нужно масштабировать как заряд, так и гравитацию. Это основные две вычислительные силы, которые определяют общий размер blob. См. my force layout talk для более подробной информации.

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

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

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

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