Vue Sankey - Access a Node or Link Using the API

Call the getAllNodes() method to access all nodes. It returns a collection of Node objects. Similarly, you can call the getAllLinks() method to get a collection of Link objects:

jQuery
JavaScript
var sankey = $("#sankeyContainer").dxSankey("instance");
var sankeyNodes = sankey.getAllNodes();
var sankeyLinks = sankey.getAllLinks();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxSankeyModule, DxSankeyComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxSankeyComponent, { static: false }) sankey: DxSankeyComponent;
    // Prior to Angular 8
    // @ViewChild(DxSankeyComponent) sankey: DxSankeyComponent;
    sankeyNodes: Array<any>;
    sankeyLinks: Array<any>;
    getSankeyNodes() {
        this.sankeyNodes = this.sankey.instance.getAllNodes();
    }
    getSankeyLinks() {
        this.sankeyLinks = this.sankey.instance.getAllLinks();
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ref="sankey" />
</template>

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

export default {
    components: {
        DxSankey
    },
    methods: {
        getAllNodes () {
            return this.$refs.sankey.instance.getAllNodes();
        },
        getAllLinks () {
            return this.$refs.sankey.instance.getAllLinks();
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.sankeyRef = React.createRef();
    }
    render() {
        return (
            <Sankey ref={this.sankeyRef} />
        )
    }
    get sankey() {
        return this.sankeyRef.current.instance;
    }
    getAllNodes() {
        return this.sankey.getAllNodes();
    }
    getAllLinks() {
        return this.sankey.getAllLinks();
    }
}

export default App;

You can also access a node or link in the event handlers. For example, the onNodeClick event handler gets the clicked node in the argument:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        onNodeClick: function(e) {
            var node = e.target;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ...
    (onNodeClick)="sankey_onNodeClick($event)">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    sankey_onNodeClick(e) {
        let node = e.target;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey @node-click="onNodeClick" />
</template>

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

export default {
    components: {
        DxSankey
    },
    methods: {
        onNodeClick (e) {
            let node = e.target;
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey onNodeClick={this.onNodeClick} />
        )
    }
    onNodeClick(e) {
        let node = e.target;
        // ...
    }
}

export default App;
See Also
jQuery
Angular
Vue
React