Плата на основе размера - d3 - программирование

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

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

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

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

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

Ответ 1

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

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

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

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

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