DevExtreme jQuery - 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
],
// ...
})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
],
// ...
})See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Feedback