CODEWITHSUNDEEP
javascriptsvgd3.jssankey-diagram
wivku
wivku

Reputation: 2653

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

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:

original behavior

to:

desired behavior

Upvotes: 4

Views: 463

Answers (2)

VividD
VividD

Reputation: 10536

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

enter image description here

Example 2

(with proposed change)

jsfiddle

enter image description here

Example 3

(with both MoveSinksRight() and MoveSourcesRight())

jsfiddle

enter image description here

Example 4

(without both MoveSinksRight() and MoveSourcesRight())

jsfiddle

enter image description here

Upvotes: 3

Dan Harrington
Dan Harrington

Reputation: 763

This is my approach:

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

I'm explicitly setting the x co-ordinates using graph.links[3].source.x = 200 etc. This could be linked to a dataset rather than being hard coded I guess

Upvotes: 0

Related Questions