Sankey figure, nodes disorder

Community Help
1

Dear all, as can be seen in the : Sankey
The nodes disordered. Based on the design, the green nodes rows should be on the top, the blue should be on the middle and the red rows should be on the bottom.
Would anyone tell me the reason? Thank you very much!

2

You can add the following to where you are creating d3.sankey():

.nodeSort((a, b) => d3.ascending(+a.range, +b.range))

This sorts the nodes in ascending order by the range field. The plus sign converts the strings into integers. Now the nodes are correctly sorted with green on top, blue in the middle, and red on bottom.

The whole declaration could then look like this:

const sankey = d3.sankey()
      .nodeSort((a, b) => d3.ascending(+a.range, +b.range))
      .nodeId(d => d.id)
      .nodeWidth(3)
      .nodePadding(8)
      .extent([[5, 5], [width - 1, height - 5]]);
1 Like