All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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