Is there a way to have multiple links between to nodes not overlay on top of each other?

[raphael chancey]

I am trying a graph and have node to node connections. Sometimes I have multiple connections between two nodes.

I was either going to add multiple annotations to show multiple labels, the other solution was to have the diagram not overlay nodes or connections on top of each other.

Is there a layout or node shape that I can use to indicate a node can have multiple connections to another node but each is visualized separately? 

[Shyam G]

Hi Raphael, 

 

Query	Response
I was either going to add multiple annotations to show multiple labels, the other solution was to have the diagram not overlay nodes or connections on top of each other.	To avoid overlapping of connectors on the nodes, you can use our LineRouting feature.    To enable line routing, please enable diagram constraints LineRouting along with Default constraints. Also you need to inject LineRouting. Please refer to an code example below.    Code example:  <DiagramComponent id="diagram" ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"499px"}   constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting} nodes={nodes} connectors={connectors} >                <Inject services={[LineRouting]}/>              </DiagramComponent>      Online sample:  https://ej2.syncfusion.com/react/demos/#/material/diagram/line-routing
Is there a layout or node shape that I can use to indicate a node can have multiple connections to another node but each is visualized separately?	We don’t have option to avoid Connector Overlapping while multiple connectors connected to Node. We have logged “Line Distribution Support” as a feature and you can track the status of the feature from the below link.  Feedback link:  https://www.syncfusion.com/feedback/2712/line-distribution-support  However you can use ports to achieve your requirement. Please refer to a help documentation and online sample link below.  Help documentation: https://ej2.syncfusion.com/react/documentation/diagram/ports/?no-cache=1  Online sample: https://ej2.syncfusion.com/react/demos/#/material/diagram/port

 

 

Regards, 

Shyam G 

[raphael chancey]

I really appreciate all your examples. I will try the line routing and also investigate the port support.

btw. all the examples in the online doc don't render.. none do. Can you have someone look at those so I can see those?

I mean these examples: https://ej2.syncfusion.com/react/documentation/diagram/connectors/#avoid-overlapping.. the preview.. all busted 

[Naganathan Ganesh Babu]

Hi Raphael, 

 

We are able to reproduce the reported issue at our end. We have forwarded your query to our development team to further analysis and we will update the more information on 4^th November 2019. 

 

Regards, 

 

Naganathan K G 

[Shyam G]

Hi Raphael, 

We have logged a documentation task for your issue. We will solve it and let you know once it is refreshed online. 

Regards, 

Shyam G 

[Shane Fitzmaurice]

I see LineDistribution has been added as a package, but this appears to only stop connectors from overlapping nodes. Is there any update on when it will be possible to stop connectors from overlapping each other on a Complex Hierarchical Diagram?

Thanks,

Shane F

[Vivisa Ganesan]

We created a sample to achieve your requirements. To prevent connector overlapping ,use layout connectionPointOrigin property as DifferentPoint

Code snippet:

 layout=

{

              {

                type: 'ComplexHierarchicalTree',

                connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,

                horizontalSpacing: 40,

                verticalSpacing: 40,

                orientation: 'TopToBottom',

                margin: { left: 10, right: 0, top: 50, bottom: 0 },

         }

}

Sample:

https://stackblitz.com/edit/react-wo2rmd?file=index.js,package.json