We are live on DevHunt: tool of the week contest
The Sankey diagram relies on the node editor's classic preset and includes custom components for nodes, connections, and sockets. Nodes are given a predefined capacity (equal to height), and ports are generated for each connection with a height (weight) equal to the connection's weight.
Implementing this feature in your project is easy - just copy the
sankey directory and some code from
editor.ts, including the
Presets.classic.setup options and
importGraph. Additionally, you can restrict node movement with
createSankeyRestrictor to keep source nodes on the left of target nodes. Finally, add an option to
arrange.layout to increase the distance between nodes.
This example was specifically developed for React.js, but you can adapt it for use in other rendering plugins by adapting the custom components to your stack.