in Sankey diagram: make paths "as short as possible"?

Question

I am interested in using Sankey diagrams, like http://bost.ocks.org/mike/sankey/

Specifically, I am using the block that enables cycles: http://bl.ocks.org/cfergus/3956043

But, each "start-node" is drawn on the far left and each "end-node" drawn on the far right. Ascii example:

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

What I prefer (in my specific case) is to keep the paths as short as possible, e.g.:

|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

Any d3js experts that know if this is easy to modify in the position calculation algorithm?

At the moment I manually move the nodes after they have been rendered.

from:

to:

Answer 1

Yes, it is possible to achieve what you want, with a simple change in Sankey code plugin.

There is a line in function computeNodeBreadths() within Sankey plugin:

moveSinksRight(x);

It should be changed to:

moveSourcesRight(x);

This is illustrated in following two examples:

Example 1

(original Sankey plugin)

jsfiddle

Example 2

(with proposed change)

jsfiddle

Example 3

(with both MoveSinksRight() and MoveSourcesRight())

jsfiddle

Example 4

(without both MoveSinksRight() and MoveSourcesRight())

jsfiddle