Сеть концептуальных карт - Node Проблема

Я пытаюсь реализовать графический сетевой график с использованием d3.js. Пример графика доступен здесь в js-скрипке.

Направление node указывает только в левом направлении. Все узлы в правой части имеют линии из задней части прямоугольника. Я хочу отобразить все узлы как слева, так и справа.

Ожидаемый график:

Ответ 1

Я нашел решение, проверив положение кривой с помощью этого кода.

 if(af.x>180)
 {
   af.xOffset = -S;
 }else
 {
   af.xOffset = S;
 }

и проверив условие для функции push

if (ab.x > 180) {
                    H.push({
                        source: ae,
                        target: ab,
                        key: aa,
                        canonicalKey: aa,
                        x1: ae.x + (ab.type === "theme" ? 0 : U),
                        y1: ae.y + K / 2,
                        x2: Math.cos(Y) * X + ab.xOffset,
                        y2: Math.sin(Y) * X
                    })
                }
                else if (ae.x < 180) {
                    H.push({
                        source: ae,
                        target: ab,
                        key: aa,
                        canonicalKey: aa,
                        x1: ae.x + (ab.type === "theme" ? U : 0),
                        y1: ae.y + K / 2,
                        x2: Math.cos(Y) * X + ab.xOffset,
                        y2: Math.sin(Y) * X
                    })
                }

Ожидаемый результат был

Ответ 2

Проблема, с которой вы сталкиваетесь, заключается в том, что ссылки node соединяются в верхнем левом углу. этой центральной колонны.

Вам необходимо:

Найдите источник всех ссылок, идущих с правой стороны.
Смещение позиции источника x по ширине центрального столбца.

Возможно, у меня есть источник и мишень. Код выглядит частично миниатюрным, поэтому его довольно сложно прочитать.

Вы можете легко получить ширину элемента (Пример).

Вы можете узнать, следует ли менять ссылку, сравнивая исходные и целевые позиции x.

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

EDIT:

Вы также можете попробовать привязать к центру node вместо угла.