mole422 commented on issue #20445:
URL: https://github.com/apache/echarts/issues/20445#issuecomment-2466208339
# Solution to the Sankey Diagram Line Occlusion Problem
## Problem Description
In some cases, the lines (flows) between nodes in a Sankey diagram may
become occluded, making them invisible or unclear. This issue typically arises
in two scenarios:
1. **Node Occlusion**: When there are many nodes or the nodes are placed too
close together, some flow paths may be hidden, affecting readability.
2. **Invisible Lines**: If the lines between nodes are very thin or if the
path curvature is not set properly, the lines might become nearly invisible.
## Solution
To resolve the issue of occluded lines, we can adjust the minimum distance
between nodes to improve the visualization of the flow lines. The proposed
solution is to introduce a new API parameter called `minimumMidpointDistance`,
which controls the minimum distance between the flow path's midpoint and the
nodes, ensuring that the lines remain visible and are not hidden by other nodes.
### API Parameter
- **`minimumMidpointDistance`**: This parameter is used to control the
minimum distance between the midpoint of a flow path and the nodes. It can be:
- **Absolute value**: For example, `30`, meaning the minimum distance is
30 pixels.
- **Relative value**: For example, `'20%'`, meaning the minimum distance
is 20% of the total width of the chart.
By adjusting this parameter, you can ensure that the lines have enough space
to be visible, preventing them from being occluded by other nodes.
### Example
Here’s an example of how to use `minimumMidpointDistance`:
```js
{
source: 'prod1',
target: 'prod2',
value: 30,
lineStyle: {
minimumMidpointDistance: 30 // Set minimum distance between nodes to 30
pixels
},
},
{
source: 'prod2',
target: 'prod3',
value: 25,
lineStyle: {
minimumMidpointDistance: '20%' // Set minimum distance to 20% of the
total chart width
},
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
