D3 различия компоновки силы между v3 и v4 при использовании mutliple подключенных компонентов

Question

MWEs

Я попытался создать такой же график, как с версией, вот Bl.ocks:

• v3
• v4

Эти примеры адаптированы из one официальных примеров.

Выпуск

Различия возникают, когда есть более одного компонента связности. Есть, в частности, две вещей, которые не работают для меня в 4-е версии:

1. тянущих один подключенный компонент делает другие, чтобы перевести дико вокруг (я предполагаю), силовой центр, в самом не-физики путь;

2. на мыши вниз (даже без фактического перемещения) другие подключенные компоненты отходят на неопределенный срок, в конечном счете, с экрана.

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

Как я могу исправить эти два поведения, сделав имитацию более похожей на версию 3?

Answer 1

Вы не хотите d3.forceCenter. Если вы посмотрите на API:

центрирования сила переводит узлы равномерно, так что среднее положение всех узлов (центр масс, если все узлы имеют одинаковый вес) находится в заданном положении ⟨x, y⟩

Это означает, что при перемещении узла от центра, другие узлы будут двигаться в противоположном направлении, чтобы компенсировать движение, так что центр масс остается в том же положении.

Вместо этого следует использовать forceX и forceY:

х- и у-позиционирования силы выдвинуть узлы в направлении желаемой позиции вдоль заданной размерности с настраиваемой силой.

Итак, это моделирование:

const simulation = d3.forceSimulation() 
    .force('link', d3.forceLink().distance(200)) 
    .force('charge', d3.forceManyBody()) 
    .force('centerX', d3.forceX(width/2)) 
    .force('centerY', d3.forceY(height/2)); 

Вот обновленная скрипка: https://jsfiddle.net/ahdbLL8a/