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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148705 Oct 31,2019 02:52 AM UTC Nov 4,2019 09:23 AM UTC React - EJ 2 4
loading
Tags: Diagram
raphael chancey
Asked On October 31, 2019 02:52 AM UTC

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 [Syncfusion]
Replied On October 31, 2019 09:06 AM UTC

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 


raphael chancey
Replied On October 31, 2019 02:39 PM UTC

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 [Syncfusion]
Replied On November 1, 2019 10:23 AM UTC

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 


Shyam G [Syncfusion]
Replied On November 4, 2019 09:23 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon