Tree Layout - why so much spacing?

5 posts, 0 answers
  1. James
    James avatar
    3 posts
    Member since:
    Jun 2013

    Posted 05 Jun 2015 Link to this post

    I am trying to represent a Yes/No decision tree using the Diagram control. When rendered using the TreeDown, OrgChart layout/router, it seems that some nodes are rendered with minimal offset, while others are rendered so that there is no vertical alignment, yet I add the connectors in the same fashion.

    See attached for an example. The result is that a significant amount of scrolling is needed to follow the connectors to the nodes.

    Is there a way I can indicate that it is ok to draw nodes with vertical overlap (similar to how the "yes" path is drawn in the example), instead of the layout engine leaving room under shapes and causing the diagram to appear abnormally wide?

     

  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 09 Jun 2015 Link to this post

    Hello James,

    The TreeLayout has a HorizontalSeparation value which you might change in order to achieve more compact view. The layout takes in mind that the trees should never overlap. This said, even if you set your HorizontalSeparation to its minimum, it might not tight enough the tree. You can take a look at our online demo example and play with the separations to get a better idea of how they work. The SDK Layout demo is also e good example where the layout capabilities are demonstrated.

    I would also suggest you to try our the TipOverTree layout along with the Horizontal Indents property which in your case will tighten up the tree.

    Regards,
    Peshito
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. James
    James avatar
    3 posts
    Member since:
    Jun 2013

    Posted 10 Jun 2015 in reply to Peshito Link to this post

    My user requirements specifically call for the top-down and right-facing tree layouts, so the TipOverTree is not an option. Unfortunately, this layout is likely to be seen as a usability problem by my users. I've tried setting the HorizontalSeparation property, but it has no effect in tightening up the layout, even though there appears to be room to draw the tree in a much more compact fashion.

    Thoughts on why the layout isn't balanced and compact like in the demos?

  5. James
    James avatar
    3 posts
    Member since:
    Jun 2013

    Posted 10 Jun 2015 in reply to James Link to this post

    I've attached another screenshot with nodes under different shapes to demonstrate the algorithm, and the difficulty for users to follow it as a simple decision tree. It's clear that the algorithm attempts to keep sibling nodes away from vertically being above **the entire width** of the subtree of another sibling. I cannot get horizontal separation to take precedence. There are no hidden or collapsed subtrees, so there is nothing overlapping or potentially overlapping.

    The online demos are too simplistic to replicate this scenario.

  6. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 11 Jun 2015 Link to this post

    Hi James,

    I was able to reproduce the same behavior like the one shown on the picture using our online demos. The reason for this is because the tree layout logic follows a rule that the bounding rectangles of two children should not overlap with each other. This means that when a node has two children(let say A and B) and one of them has two more children(C and D), the bounding rectangle of the first one(A) will be bigger than the bounding rectangle for B and not only that but it will get bigger if C and D had children as well. Please take a look at the attached picture.

    What you could do however as a possible workaround is to attach to diagram's DiagramLayoutComplete event and check whether a child has children and if not to set it's position manually.

    There is also a feature request logged in our feedback portal for extending the layout mechanism to allow control over the layouted elements. You can vote for it and track its progress using the link below:
    http://feedback.telerik.com/Project/143/Feedback/Details/113795-diagrams-extend-the-layout-mechanism-to-allow-control-over-the-layouted-elements

    Regards,
    Peshito
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready