React 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:
jQuery
$(function() { $("#sankeyContainer").dxSankey({ // ... node: { padding: 1 } }); });
Angular
<dx-sankey ... > <dxo-node [padding]="1"></dxo-node> </dx-sankey>
import { DxSankeyModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
Vue
<template> <DxSankey ... > <DxNode :padding="1" /> </DxSankey> </template> <script> import DxSankey, { DxNode } from 'devextreme-vue/sankey'; export default { components: { DxSankey, DxNode } } </script>
React
import React from 'react'; import Sankey, { Node } from 'devextreme-react/sankey'; class App extends React.Component { render() { return ( <Sankey ... > <Node padding={1} /> </Sankey> ) } } export default App;
Each column can be aligned vertically. You can find an example in the alignment property's description.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.