Начисление в зависимости от размера - расклад d3 force - PullRequest
Новая
       25

Начисление в зависимости от размера - расклад d3 force

13 голосов
/ 28 марта 2012

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

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

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

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

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

1 Ответ

20 голосов
/ 29 марта 2012

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

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

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

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

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

...