How to assign the x-axis position of a node in a Sankey Diagram (D3) from the json file

Question

I finally found a Sankey Diagram in D3 that allows movement of the nodes across the x-axis, but I would like to assign a value from the json file to fix the position in particular places.

http://bl.ocks.org/d3noob/raw/5028304/

What I am trying to do is use the Sankey Diagram as a timeline.

Answer 1

Let us call the x-coordinate layer. layer=0 will be left edge, and layer=n will be the right edge. In your JSON file, in the nodes field, add the key-value pair "layer": your_desired_x_as_integer for each node.

Then go the sankey.js file and find the function componentsByBreadth.forEach. Replace the line node.x = component.x + node.x; with:

if (node.layer) node.x=node.layer;
else node.x = component.x + node.x;

You can defined density of layers like this also, e.g. nodes placed on layers 0,1,2 or 0,4,8 will have a central node and two on the edges of the width of the sankey, but 0,1,5 will not have.

If you need more help, this feature, among many other is included in my D3 Sankey app: http://sankey.csaladen.es