Maximum Incoming Connectors In One Node

[Khar Hui Chok]

Hi Syncfusion Team,

In Radial Tree automatic layout, I wanted to allow 10 nodes to connect to 1 node (1 node having 10 incoming connectors). However, when it comes to 4 nodes and above, the nodes are overlapping, screenshot provided is showing Nodes 4 on top of Nodes 3.

However, when I tested 1 node to have 10 outgoing connectors to 10 nodes, it is working fine (refer screenshot).

Is there a way to avoid overlapping of nodes without explicitly assign the node position by setting OffsetX and OffsetY? 

Thank You.

Regards,

Chok Khar Hui

Attachment: Maximum_Incoming_Connectors_In_One_Node_c4a2ff88.zip

[Gowtham Gunashekar]

Hi Khar, 

 

On the further analysis on the shared details, we found in the image named ” 10 outgoing connectors.jpg” has the single parent and multi-children node relationship and connectors has parent to child (outgoing connector from parent to child) relationship that the diagram radial tree layout supports.. But in the image “4 nodes.jpg” has Connector relationship of child to parent(incoming connector from child to parent), which our radial tree layout algorithm does not support, that why the “4 nodes.jpg” image has diagram which is not aligned as expected. 

 

We suggest you to create a layout diagram as like as the image “10 outgoing connectors.jpg” and set connector’s target decorator as “None” and source decorator as “Arrow” in GetConnectorDefaults to achieve your requirement. In case, you are adding the node and connector at runtime and want to algin the node to ist layout position means use doLayout API to align the node to its layout position automatically. 

 

Code snippet: 

[.cshtml] 

 

        @(Html.EJS().Diagram("diagram").Width("100%").Height("600px").GetConnectorDefaults("getConnectorDefaults")).Render()) 

 

[.js] 

      function getConnectorDefaults(connector, diagram) { 

            connector.type = 'Straight'; 

            connector.sourceDecorator.shape = "Arrow";  

            connector.targetDecorator.shape = "None";  

            return connector; 

        } 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RadilaeTreeWithSourceDecorator989869500.zip 

 

 

 

Regards, 

Gowtham.