Angular Sankey - Rearrange Nodes

The Sankey's algorithm distributes nodes between columns. This distribution ensures a proper node-to-node flow direction. You cannot move nodes from one column to another because this alters the flow direction.

However, you can sort nodes within a column. Configure the sortData object so that its fields correspond to nodes. The field values should be node weights: the heavier the node, the lower it is in its column. Refer to the sortData description for an example.

Nodes in a column are separated by a space. You can use the node.padding property to specify this space. In the following code, this distance is reduced to 1 pixel:

App.vue
  • <template>
  • <DxSankey ... >
  • <DxNode :padding="1" />
  • </DxSankey>
  • </template>
  •  
  • <script>
  • import DxSankey, { DxNode } from 'devextreme-vue/sankey';
  •  
  • export default {
  • components: {
  • DxSankey,
  • DxNode
  • }
  • }
  • </script>

Each column can be aligned vertically. You can find an example in the alignment property's description.

See Also