React Sankey - Hover

User Interaction

When a sankey node or link is hovered over or pressed, it applies the appearance specified in the node.hoverStyle or link.hoverStyle object. In the following code, these objects are used to make nodes half-opaque and make the links' border visible:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        node: {
            hoverStyle: {
                opacity: 0.5
            }

        },
        link: {
            hoverStyle: {
                border: {
                    visible: true
                }
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-node>
        <dxo-hover-style
            [opacity]="0.5">
        </dxo-hover-style>
    </dxo-node>
    <dxo-link>
        <dxo-hover-style>
            <dxo-border [visible]="true"></dxo-border>
        </dxo-hover-style>
    </dxo-link>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxNode>
            <DxHoverStyle :opacity="0.5" />
        </DxNode>
        <DxLink>
            <DxHoverStyle>
                <DxBorder :visible="true" />
            </DxHoverStyle>
        </DxLink>
    </DxSankey>
</template>

<script>
import DxSankey, {
    DxNode,
    DxHoverStyle,
    DxLink,
    DxBorder
} from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxNode,
        DxHoverStyle,
        DxLink,
        DxBorder
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, {
    Node,
    Link,
    Border,
    HoverStyle
} from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Node ... >
                    <HoverStyle opacity={0.5} />
                </Node>
                <Link>
                    <HoverStyle>
                        <Border visible={true} />
                    </HoverStyle>
                </Link>
            </Sankey>
        );
    }
}

export default App;

Set hoverEnabled to false if nodes and links should not react when they are hovered over or pressed:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        hoverEnabled: false
    });
});
Angular
HTML
TypeScript
<dx-sankey ...
    [hoverEnabled]="false">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey :hover-enabled="false" />
</template>

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

export default {
    components: {
        DxSankey
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey hoverEnabled={false} />
        );
    }
}

export default App;

API

To change a node or link's hover state, pass true or false to their hover(state) method. You can call the isHovered() method to check the current state.

jQuery
JavaScript
var toggleItemHoverState = function(item) {
    item.hover(!item.isHovered());
}
Angular
TypeScript
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    toggleItemHoverState(item) {
        item.hover(!item.isHovered());
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue

<script>
export default {
    methods: {
        toggleItemHoverState (item) {
            item.hover(!item.isHovered());
        }
    }
}
</script>
React
App.js
import React from 'react';

class App extends React.Component {
    toggleItemHoverState (item) {
        item.hover(!item.isHovered());
    }
}

export default App;
See Also

Events

The Sankey UI component raises individual events for nodes and links when their hover state changes. You can handle them with functions. If the handling functions are not going to be changed at runtime, assign them to the onNodeHoverChanged and onLinkHoverChanged properties when you configure the UI component. To check whether the sankey element is being hovered over, call its isHovered() method.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        onNodeHoverChanged: function(e) {
            if(e.target.isHovered()) {
                // Commands to execute when the pointer enters a node
            } else {
                // Commands to execute when the pointer leaves a node
            }
        },
        onLinkHoverChanged: function(e) {
            if(e.target.isHovered()) {
                // Commands to execute when the pointer enters a link
            } else {
                // Commands to execute when the pointer leaves a link
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ...
    (onNodeHoverChanged)="sankey_onNodeHoverChanged($event)"
    (onLinkHoverChanged)="sankey_onLinkHoverChanged($event)">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    sankey_onNodeHoverChanged(e) {
        if(e.target.isHovered()) {
            // Commands to execute when the pointer enters a node
        } else {
            // Commands to execute when the pointer leaves a node
        }
    }
    sankey_onLinkHoverChanged(e) {
        if(e.target.isHovered()) {
            // Commands to execute when the pointer enters a link
        } else {
            // Commands to execute when the pointer leaves a link
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey
        @node-hover-changed="onNodeHoverChanged"
        @link-hover-changed="onLinkHoverChanged"
    />
</template>

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

export default {
    components: {
        DxSankey
    },
    methods: {
        onNodeHoverChanged (e) {
            if(e.target.isHovered()) {
                // Commands to execute when the pointer enters a node
            } else {
                // Commands to execute when the pointer leaves a node
            }
        },
        onLinkHoverChanged (e) {
            if(e.target.isHovered()) {
                // Commands to execute when the pointer enters a link
            } else {
                // Commands to execute when the pointer leaves a link
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey
                onNodeHoverChanged={this.onNodeHoverChanged}
                onLinkHoverChanged={this.onLinkHoverChanged}
            />
        );
    }
    onNodeHoverChanged (e) {
        if(e.target.isHovered()) {
            // Commands to execute when the pointer enters a node
        } else {
            // Commands to execute when the pointer leaves a node
        }
    },
    onLinkHoverChanged (e) {
        if(e.target.isHovered()) {
            // Commands to execute when the pointer enters a link
        } else {
            // Commands to execute when the pointer leaves a link
        }
    }
}

export default App;

If you are going to change the event handlers at runtime or if you need several handlers for a single event, subscribe to the hover-related events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
var nodeHoverChangedHandler1 = function(e) {
    // First handler of the "nodeHoverChanged" event
};

var nodeHoverChangedHandler2 = function(e) {
    // Second handler of the "nodeHoverChanged" event
};

$("#sankeyContainer").dxSankey("instance")
    .on("nodeHoverChanged", nodeHoverChangedHandler1)
    .on("nodeHoverChanged", nodeHoverChangedHandler2);
See Also
jQuery
Angular
Vue
React