[I] [Feature] Minimum Vertex Distance [echarts]

["spearmootz (via GitHub)" <gi...@apache.org>]

spearmootz opened a new issue, #20445:
URL: https://github.com/apache/echarts/issues/20445

   ### What problem does this feature solve?
   
   in the following graph, you cannot vizualise the line between the nodes.  for 2 reasons, the lines between the two are barely visible, and then the lines between prod 1 and prod 3 are hidden by the prod 2 node. in one of the examples i change the curve to illustrate that it also doesnt work.
   
   
   https://echarts.apache.org/examples/en/editor.html?c=sankey-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXMmurGAJ4hbEDkGAhtANZYW0A0p6ANgxcACuYOtBhZO3WFgC2IABYMMEIiTJkAZsADGg1bQYATAFYNtWaNvZSAvl3V8BwgJJhcDSDFUAGe2UMeDMQA2lLoqOrq0AwyNLC0IDjAhgCMkpH-WODyxN5hsHb5ERmw0bF0ickATOklhllgObB5GYUZxRllcQlJhgDMtRn12bn5NlIAun68ECyqoZFF-egYQjjmFb1p05FgDDgA5lgi8ZWGNTvqAG4MPIJxfb7LsDyzWADKlDxxHSW6OFcLARVClnm1IuD1L91KtBOtumdts89odjptkgNLmQbncHk8Si83p8KN9iNDIv9AdBgcRQQTIWQGeFnrD4ejUoNdvsjicehjOQ4iV8fs90JSgRgQS0Skzsbd7sRHmNJqRxjYANxAA
   
   ### What does the proposed API look like?
   
   minimumVertexDistance may also be a good name.
   
   {
           source: 'prod1',
           target: 'prod2',
           value: 30,
           lineStyle: {
             minimumMidpointDistance: 30  || '20%' //20% of distance between depth 0 and depth 1
           },
         },


-- 
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: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

Re: [I] [Feature] Minimum Vertex Distance [echarts]

["mole422 (via GitHub)" <gi...@apache.org>]

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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org