на диаграмме Санки: сделать пути как можно короче?

Я заинтересован в использовании диаграмм Санки, таких как http://bost.ocks.org/mike/sankey/

В частности, я использую блок, который включает циклы: http://bl.ocks.org/cfergus/3956043

Но каждый «начальный узел» рисуется в крайнем левом углу, а каждый «конечный узел» — в крайнем правом. Пример ASCII:

|A ----> B ----> C ----> D|
|E-------------> C        | <-- starts far left
|F --------------------> D| <-- starts far left
|G ----> B ------------> H| <-- finishes far right

Я предпочитаю (в моем конкретном случае) сохранять пути как можно короче, например:

|A ----> B ----> C ----> D|
|        E-----> C        |  <-- don't start far left
|                F ----> D|  <-- don't start far left
|G ----> B ----> H        |  <-- don't finish far right

Есть ли эксперты по d3js, которые знают, легко ли это изменить в алгоритме расчета позиции?

На данный момент я вручную перемещаю узлы после их рендеринга.

от:

исходное поведение

to:

желаемое поведение


javascript svg d3.js sankey-diagram
person wivku    schedule 29.10.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

В плагине Sankey есть строка в функции computeNodeBreadths():

moveSinksRight(x);

Его следует изменить на:

moveSourcesRight(x);

Это показано на следующих двух примерах:

Пример 1

(оригинальный плагин Sankey)

jsfiddle

введите здесь описание изображения

Пример 2

(с предлагаемым изменением)

jsfiddle

введите здесь описание изображения

Пример 3

(с MoveSinksRight() и MoveSourcesRight())

jsfiddle

введите здесь описание изображения

Пример 4

(без MoveSinksRight() и MoveSourcesRight())

jsfiddle

введите здесь описание изображения

person VividD    schedule 18.12.2014
comment
Отлично, именно то, что я искал. Спасибо! Кажется, вы использовали один и тот же jsfiddle, например, 2 и 3? - person wivku; 19.12.2014

arrow_upward
0
arrow_downward

Это мой подход:

http://bl.ocks.org/danharr/af796d91926d254dfe99

Я явно устанавливаю координаты x, используя graph.links[3].source.x = 200 и т. д. Я думаю, это может быть связано с набором данных, а не жестко запрограммировано

person Dan Harrington    schedule 31.10.2014
comment
Ваш ответ приветствуется, но я ищу, что изменить в алгоритме, а не как жестко закодировать координаты. - person wivku; 01.11.2014