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:
- <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>
Set hoverEnabled to false if nodes and links should not react when they are hovered over or pressed:
- <template>
- <DxSankey :hover-enabled="false" />
- </template>
- <script>
- import DxSankey from 'devextreme-vue/sankey';
- export default {
- components: {
- DxSankey
- }
- }
- </script>
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.
- <script>
- export default {
- methods: {
- toggleItemHoverState (item) {
- item.hover(!item.isHovered());
- }
- }
- }
- </script>
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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.