React Sankey - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the Sankey's getDataSource() method:

jQuery
index.js
function getDataSource() {
    return $("#sankeyContainer").dxSankey("getDataSource");
}
Angular
app.component.ts
app.module.ts
import { Component, ViewChild } from '@angular/core';
import { DxSankeyComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxSankeyComponent, { static: false }) sankey: DxSankeyComponent;
    // Prior to Angular 8
    // @ViewChild(DxSankeyComponent) sankey: DxSankeyComponent;
    getDataSource() {
        return this.sankey.instance.getDataSource();
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSankeyModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSankeyModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxSankey :ref="sankeyRefKey">
        <!-- ... -->
    </DxSankey>
</template>

<script>
import DxSankey from 'devextreme-vue/sankey';

const sankeyRefKey = "my-sankey";

export default {
    components: {
        DxSankey
    },
    data() {
        return {
            sankeyRefKey
        }
    },
    methods: {
        getDataSource: function() {
            return this.sankey.getDataSource();
        }
    },
    computed: {
        sankey: function() {
            return this.$refs[sankeyRefKey].instance;
        }
    }
}
</script>
React
App.js
import { useRef } from 'react';
import Sankey from 'devextreme-react/sankey';

export default function App() {
    const sankey = useRef(null);
    const getDataSource = () => {
        return sankey.current.instance.getDataSource();
    }

    return (
        <Sankey ref={sankey}>
            {/* ... */}
        </Sankey>
    );
}

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Sankey will be updated automatically.

JavaScript
getDataSource().store().push([
    { type: "update", key: "Oranges", data: { count: 10 } },
    { type: "remove", key: "Apples" }
]);
See Also
jQuery
Angular
Vue
React

JavaScript Array

jQuery

You can use the standard methods to make changes to the array. Then, use the option(optionName, optionValue) method to reassign the updated array to the Sankey.

JavaScript
var sankeyData = [
    { source: "Brazil", target: "Spain", weight: 4 },
    { source: "Brazil", target: "Portugal", weight: 5 },
    { source: "Brazil", target: "England", weight: 2 },
    { source: "Canada", target: "Portugal", weight: 2 },
    { source: "Canada", target: "England", weight: 1 },
    { source: "Mexico", target: "Portugal", weight: 9 },
    { source: "Mexico", target: "Spain", weight: 5 }
];

sankeyData.push({ source: "Mexico", target: "Spain", weight: 2 });
// Reassigns the "sankeyData" array to the Sankey 
$("#sankeyContainer").dxSankey("option", "dataSource", sankeyData);
Angular

Enclose the dataSource property in square brackets to bind it to an array using one-way binding. Now, whenever an item is added or removed from the array, the Sankey is updated accordingly.

HTML
TypeScript
<dx-sankey
    [dataSource]="sankeyData">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    sankeyData: Array<{ source: string, target: string, weight: number }> = [
        { source: "Brazil", target: "Spain", weight: 4 },
        { source: "Brazil", target: "Portugal", weight: 5 },
        { source: "Brazil", target: "England", weight: 2 },
        { source: "Canada", target: "Portugal", weight: 2 },
        { source: "Canada", target: "England", weight: 1 },
        { source: "Mexico", target: "Portugal", weight: 9 },
        { source: "Mexico", target: "Spain", weight: 5 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue

Bind the dataSource property to an array using one-way binding. Now, whenever an item is added or removed from the array, the Sankey is updated accordingly.

React

Bind the dataSource property to an array using one-way binding. Now, whenever an item is added or removed from the array, the Sankey is updated accordingly.

See Also