[Feature] Minimum Vertex Distance

[spearmootz]

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 }, },

[mole422]

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:

option = {
  series: {
    type: 'sankey',
    layout: 'none',
    emphasis: {
      focus: 'adjacency'
    },
    layoutIterations: 0,
    data: [
      {
        name: 'prod1',
        depth: 0
      },
      {
        name: 'prod2',
        depth: 0
      },
      {
        name: 'prod3',
        depth: 0
      }
    ],
    links: [
      {
        source: 'prod1',
        target: 'prod2',
        value: 30,
        lineStyle: {
          curveness: 1,
          minimumMidpointDistance: 30 // Prevent line occlusion by setting a minimum distance
        },
      },
      {
        source: 'prod1',
        target: 'prod3',
        value: 30,
        lineStyle: {
          curveness: 1,
          minimumMidpointDistance: 30 // Same adjustment for this line
        },
      },
      {
        source: 'prod1',
        target: 'prod3',
        lineStyle: {
          curveness: 10,
          minimumMidpointDistance: 30 // Set minimum distance for this line too
        },
        value: 30
      }
    ]
  }
};