Add horizontal alignment option to Sankey layout

[vasturiano]

Illustrating example: http://bl.ocks.org/vasturiano/b0b14f2e58fdeb0da61e62d51c649908

[vasturiano]

Any interest in merging this functionality into a future tag of d3-sankey?

[balthazar]

Sorry for the annoying bump, I'm wondering what's preventing this from being merged given @emeeks positive review. Does anyone has push access and access to the npm package?

[cirofdo]

How can I use this? I built my Sankey based on the original one with sankey.js (the d3 v4).

I want the left aligment without the buttons choice, I want it to be like this:

[vasturiano]

@thebiro to get the left alignment mode, you just need to set .align('left') on the Sankey object, i.e.:

var mySankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .align('left')

You do need to be using the code in this PR, until it is merged into d3-sankey master.

@xaranke anything I can help with to prioritize this merge?

[vasturiano]

@emeeks seems this PR is still open. Is there interest in merging this additional functionality upstream? If so, just let me know if there's anything else I can help with.

[mbostock]

Neat!

The main thing this PR needs is to switch from strings to symbols to identify the alignment method. (See d3/d3-shape#23 for a long thread that led to the current design of D3 4.0.) The simplest instantiation of this would be to define opaque objects ({}) that represent the four choices: d3.sankeyLeft, d3.sankeyCenter, d3.sankeyRight, d3.sankeyJustify. Then you pass the appropriate object to sankey.align instead of a string.

What would be better than opaque objects would be to consider whether these alignment options could be represented more generally as a function that takes a node as input and returns the desired horizontal position. I think the most natural choice would be that the function returns the topological “depth” or “height” of the node, where 0 typically represents nodes with no inputs (the leftmost column in the conventional orientation), 1 represents the immediate outputs of 0 (the next column to the right in the conventional orientation), etc.

[mbostock]

Okay, this is now implemented as sankey.nodeAlign. This method takes a function, and the four alignment methods proposed by @vasturiano are implemented:

d3.sankeyCenter

d3.sankeyLeft

d3.sankeyRight

d3.sankeyJustify (default)

To implement d3.sankeyRight, I also now populate a node.height field. (See d3.hierarchy for precedent.) It occurs to me that this might be useful for d3.sankeyCenter and d3.sankeyJustify…

[vasturiano]

Thanks @mbostock, this is great! Much cleaner with the symbols approach.