In a Sankey diagram: make the tracks "as short as possible"?
I'm interested in using Sankey diagrams, for example http://bost.ocks.org/mike/sankey/
In particular, I am using a block that includes loops: http://bl.ocks.org/cfergus/3956043
But each "start-node" is drawn at the far left, and each "end-node" is drawn on the 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 particular case) is to keep the paths as short as possible, like this:
|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 who know if this is easy to change in the position calculation algorithm?
At the moment I am manually moving the nodes after they are rendered.
from
in
source to share
Yes, you can achieve what you want with a simple change in the Sankey code plugin.
The Sankey plugin has a line in a function computeNodeBreadths()
:
moveSinksRight(x);
It should be changed to:
moveSourcesRight(x);
This is shown in the following two examples:
Example 1
(original Sankey plugin)
Example 2
(with proposed change)
Example 3
(with MoveSinksRight()
and MoveSourcesRight()
)
Example 4
(without MoveSinksRight()
and MoveSourcesRight()
)
source to share
This is my approach:
http://bl.ocks.org/danharr/af796d91926d254dfe99
I am explicitly setting the x coordinates using graph.links [3] .source.x = 200 etc. It might be related to dataset rather than hard coding. I believe,
source to share