TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Algorithm for Drawing Trees

189 pointsby mfbx9da4over 5 years ago

14 comments

slavik81over 5 years ago
&gt; I recently wanted to take a hierarchy of items and draw them in a nice tree structure. For example, a Family Tree.<p>In general, a family tree is a directed acyclic graph. Branches of the tree will always join back together if you follow the history far enough.<p>The number of ancestors in a generation is 2^N, with N being the number of generations back you&#x27;re looking. There were only 100 billion people that ever lived, so by the time you get about a thousand years back, it becomes literally impossible for all your ancestors to appear only once.<p>Of course, that&#x27;s just an easy upper bound to make the point that becoming a graph is unavoidable. In practice, branches will come together a lot sooner than that.
评论 #22089804 未加载
评论 #22088702 未加载
评论 #22089585 未加载
anigbrowlover 5 years ago
It&#x27;s a source of ongoing perplexity to me that so many Linux file managers don&#x27;t even offer a tree view, never mind some of the more advanced possibilities. Consider Robertson&#x27;s work on Cone Trees from Xerox Parc in....1991.<p><a href="https:&#x2F;&#x2F;research.tableau.com&#x2F;sites&#x2F;default&#x2F;files&#x2F;p189-robertson.pdf" rel="nofollow">https:&#x2F;&#x2F;research.tableau.com&#x2F;sites&#x2F;default&#x2F;files&#x2F;p189-robert...</a><p>and variants thereof at <a href="https:&#x2F;&#x2F;infovis-wiki.net&#x2F;wiki&#x2F;Cone_Trees" rel="nofollow">https:&#x2F;&#x2F;infovis-wiki.net&#x2F;wiki&#x2F;Cone_Trees</a><p>Oddly, there has been some work done on <i>source code</i> trees such as Gource, but for some reason nobody has yet thought of applying this to file systems or browser navigation paths.<p><a href="https:&#x2F;&#x2F;gource.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;gource.io&#x2F;</a>
评论 #22088468 未加载
评论 #22090125 未加载
评论 #22090120 未加载
tejtmover 5 years ago
Was thinking was going to get some nice L-system eye candy [0] <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;L-system" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;L-system</a>
virtuous_signalover 5 years ago
So the author mentions hearing about the Reingold-Tilford Algorithm which wouldn&#x27;t work for the example given since R-T is meant for binary trees and a family tree might have more than 2 nodes.<p>Which led me to wonder why is there even an &quot;algorithm&quot; per se for binary trees: wouldn&#x27;t it be acceptable to just trace out a complete binary tree with spaces reserved for each potential node, and only fill in a space with a node if it is non-null? Or does this not meet some criterion of &quot;niceness&quot; for drawings?
评论 #22087465 未加载
评论 #22089894 未加载
Drupover 5 years ago
I&#x27;m surprised they chose that algorithm, it&#x27;s fairly limited and not that efficient.<p>If your nodes have width, you should read &quot;Improving Walker&#x27;s Algorithm to Run in Linear Time&quot; (I have an implementation here: <a href="https:&#x2F;&#x2F;github.com&#x2F;Drup&#x2F;tree_layout" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Drup&#x2F;tree_layout</a>)<p>If your nodes have width <i>and</i> height, you need to read &quot;Drawing Non-layered Tidy Trees in Linear Time&quot;<p>If you want to go bananas visualizing n-ary trees: <a href="https:&#x2F;&#x2F;treevis.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;treevis.net&#x2F;</a> :D
HatchedLake721over 5 years ago
I implemented something similar at <a href="https:&#x2F;&#x2F;automations.io" rel="nofollow">https:&#x2F;&#x2F;automations.io</a> converting a workflow stored as a flat linked list to a tree structure and then traversing and rendering it out in HTML and sprinkling CSS on top
michaeltothover 5 years ago
I was expecting a generative art algorithm for drawing trees
sprtover 5 years ago
This is interesting, I was asked this question in an interview for a Microsoft internship, but for a binary tree.
javierantonover 5 years ago
I implemented this in this app iOS: <a href="https:&#x2F;&#x2F;apps.apple.com&#x2F;us&#x2F;app&#x2F;collaborative-groups&#x2F;id1478800849?ls=1" rel="nofollow">https:&#x2F;&#x2F;apps.apple.com&#x2F;us&#x2F;app&#x2F;collaborative-groups&#x2F;id1478800...</a> Android: <a href="https:&#x2F;&#x2F;play.google.com&#x2F;store&#x2F;apps&#x2F;details?id=com.groups.network" rel="nofollow">https:&#x2F;&#x2F;play.google.com&#x2F;store&#x2F;apps&#x2F;details?id=com.groups.net...</a> Which also has some nice features like sharing your tree with others and working together on them
xorandover 5 years ago
Some trivial mathematical facts. No matter what algorithm you use, you want to make a quasiisometrical embedding of a tree into a finite dimensional space. Or, for a tree the no of nodes at distance R from the root is like exp R, but in any space of dimension N you can cram about R^N points which are at distance R from the origin. Hence the problem.<p>But you can embedd any tree into the Hilbert space :)
tunesmithover 5 years ago
There are the various graph layout algorithms I&#x27;ve heard of, Sugiyama, KIELER, ELK - these can be used for trees of course, although I&#x27;m not sure they have highly constrained vertical levels like the article depicts.
评论 #22090002 未加载
winridover 5 years ago
Sebastian Lague did a video that includes some tree generation that was fun to watch<p>EDIT wrong kind of tree :D<p><a href="https:&#x2F;&#x2F;youtu.be&#x2F;--GB9qyZJqg" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;--GB9qyZJqg</a>
jmiskovicover 5 years ago
Nice write-up. I enjoyed how the material was presented - the introduction to problem, intuitive summary method and then detailed steps with visualizations of partial results.
billfruitover 5 years ago
I remember Robert Sedgewick&#x27;s listed a really simple method for drawing trees in his book, only it drew them sideways.