Схема ограниченной статической силы в D3js v5

Question

Схема ограниченного статического усилия - помощь?

Как мы можем создать ограниченную схему статической силы, где Simulation.tick () вызывается вручную?

В документации D3js мы видим, что событие "tick" не отправляется при ручном запуске сима. Обычно для каждого тикового события может быть наложена граница для значений x & y (см. Эту схему ограниченных сил ). Следовательно, этот вопрос сосредоточен на том, как заставить координаты x & y узла уважать границы на каждом тике симуляции.

В качестве примера, где мы можем разместить границы для этого блока, чтобы значения x & y узла оставались в красном поле?

Ошибка # 1

Я пытался создать ограничивающую функцию силы. Пока не уверен, что здесь происходит.

Код

Весь код для этих примеров доступен в Observable .

Answer 1

Проблема с вашим кодом не в пропущенных событиях, а в неправильной настройке сил вашей симуляции.Исходный пример - сборка с использованием значений по умолчанию для сил позиционирования d3.forceX и d3.forceY, которые равны 0. Это центрирует все вычисления вокруг начала координат.Весь шебанг центрируется в области просмотра путем перевода элемента g в width/2 и height/2.Поскольку вы закомментировали перевод, это центрирование больше не работает, прижимая ваши узлы к верхней и левой границе.

Это можно легко исправить, правильно настроив силы позиционирования:

.force("x", d3.forceX(d3.mean(xExtent)))
.force("y", d3.forceY(d3.mean(yExtent)))

Этопоместит центр макета в центр ограничивающего прямоугольника.

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

.force("charge", d3.forceManyBody().strength(-40))

Вот обновленный блокнот .

Answer 2

Fil подправил мою ошибку # 1, чтобы создать следующее решение:

Код для этого решения на Observable .