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

Connecting nodes with a Bezier curve that form a circle

Hello,

I am trying to replicate the following image where I have n number of nodes connected together to form a circle. I am able to place the nodes in the correct position in the diagram but need help with having the connector lines form an arc which will appear as a circle of connectors.


Attachment: ring_with_node_58592201.zip

3 Replies

GD Gobinath Dhamotharan Syncfusion Team January 10, 2023 02:48 PM UTC

Hi Daniel,

We created a sample to achieve your requirement. We connected a Bezier connector as arc with nodes to form a circle. Please refer to the below sample for your reference.


Sample

https://stackblitz.com/edit/angular-y3xn7d?file=src%2Fapp.component.ts


Regards,

Gobinath



DH Daniel Herwig January 10, 2023 04:55 PM UTC

Hey Gobinath,

This is a great example. Thank you! I have a question about the Port offset. Is the port offset x:y values in radians? If I had 7 nodes in the circle do you know how I would calculate the correct x:y values for each port?



BM Balasubramanian Manikandan Syncfusion Team January 11, 2023 11:15 AM UTC

You can refer the below documentation for the ports offset value customization.


Documentation:

https://ej2.syncfusion.com/angular/documentation/diagram/ports


Loader.
Up arrow icon