Shapes and Connections overlapping

4 posts, 0 answers
  1. Duncan
    Duncan avatar
    3 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    I've just been running through some proof of concept scenarios, really quite basic stuff, and I've stumbled onto a case where I've got Shapes overlapping Connections. I'm using an auto layout, tree down, and its a little bit confusing. I've tried adding in padding/margins to various bits and pieces but it doesn't seem to force the objects to sit independently.
    I've got a basic sample solution that hopefully helps illustrate the issue.

    If you debug this and move the circled shape, you'll see that its not connected to the items to its left and right.

    Hopefully its something silly that I'm just doing wrong!


  2. Miro Miroslavov
    Miro Miroslavov avatar
    588 posts

    Posted 17 Oct 2012 Link to this post

    Hello Duncan,

     The problem here is that your graph is not actually a tree (a tree is graph that doesn't have cycles), but yours have a cycle and that is making the Tree layout acting not really correct.
    I would suggest you if you have any type of graph (not just a tree) to use one of the more generic layout algorithms that we have. Or otherwise you should make sure that your diagram is a tree.
    Also it is important to mind the parent-child relationships in order to achieve nice looking routing of the connections.
    Let us know your comments.

    All the best,
    Miro Miroslavov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft R3 2016 release webinar banner
  4. Duncan
    Duncan avatar
    3 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    That makes sense, thanks for the prompt response Miro.

    Unfortunately, the structures I'll be generating will inherently have some cycles. I've had a quick play with the Sugiyama algorithm, it seems to do a pretty reasonable job at rendering it but it seems.. upside down. The node that I'd ideally like to be the root is at the bottom of the page; Ive tried reversing the order in which the nodes are added and likewise with the connections - it really likes having my 'root' node at the bottom. Any suggestions?
  5. Francois Vanderseypen
    Francois Vanderseypen avatar
    46 posts
    Member since:
    Oct 2009

    Posted 17 Oct 2012 Link to this post


    there are more elegant ways to do what you want but it would require some changes in the layout code; something like inserting an ordering delegate so that the tree traversal occurs according to some order in the graph definition. 
    A working alternative to this is simply changing the order in which the connections are defined (not as you tried the order of the nodes being added). It is indeed the connections which define the way the graph is traversed and not the nodes. So, in your case, if you define:

    linkShapes(a1, b3);
    linkShapes(a1, b1);
    linkShapes(b1, b2);
    linkShapes(b3, b4);
    linkShapes(b2, c2);
    linkShapes(c2, c1);
    linkShapes(b3, c2);
    linkShapes(c1, d2);
    linkShapes(d2, d1);
    linkShapes(c2, d3);
    linkShapes(d3, d4);

    you end up with a layout as attached and which I'd hope is more the way you want it.

    Hope this helps, Fr.

Back to Top