We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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? 

4 Replies

SG Shyam G Syncfusion Team October 31, 2019 01:06 AM

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: 
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: 

However you can use ports to achieve your requirement. Please refer to a help documentation and online sample link below. 



 
 
 
Regards, 
Shyam G 



RC raphael chancey October 31, 2019 06:39 AM

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 


NG Naganathan Ganesh Babu Syncfusion Team November 1, 2019 02:23 AM

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 4th November 2019. 
 
Regards, 
 
Naganathan K G 



SG Shyam G Syncfusion Team November 4, 2019 01:23 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon