DevExtreme React - Hover

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:

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

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.

See Also

• Access a Node or Link Using the API

The Sankey widget 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 options when you configure the widget. To check whether the sankey element is being hovered over, call its isHovered() method.

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.

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

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core