Tree diagrams

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

Posts: 66
Joined: Fri Oct 27, 2017 7:42 pm UTC

Tree diagrams

Postby FlatAssembler » Fri Oct 19, 2018 6:30 pm UTC

Hey, guys!
Does anyone here have an idea about how to simply draw a nice tree diagram in JavaScript? I've tried to add the ability to graphically represent the ASTs to my web-app that converts arithmetic expressions to assembly, but the results don't look nice if the AST is deep.

Posts: 475
Joined: Wed Jul 27, 2011 3:13 pm UTC

Re: Tree diagrams

Postby Tub » Fri Oct 19, 2018 8:15 pm UTC

If you want to draw it yourself, recursively printing each node and its children with indentation is easy, like

Code: Select all


For some actual graphical output, use a library. My favorite tool for graph drawing is graphviz; it does have a javascript port. d3 is also popular. And you'll find hundreds of others via google. TreeView widgets are also a thing.

User avatar
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex

Re: Tree diagrams

Postby Xanthir » Mon Oct 22, 2018 12:21 pm UTC

If HTML is fine, a nice simple CSS-based solution that still makes it easy to spot child relationships (even when a child is very large, so the next child is much further down), then check out the source of; in particular the "#dom" CSS rules. This is responsible for the "Tree View" in the second pane. Then all you have to do is output nested <ul>/<li> syntax, which is pretty easy.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

Return to “Coding”

Who is online

Users browsing this forum: No registered users and 7 guests