Page 1 of 1

Tree diagrams

Posted: Fri Oct 19, 2018 6:30 pm UTC
by FlatAssembler
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.

Re: Tree diagrams

Posted: Fri Oct 19, 2018 8:15 pm UTC
by Tub
If you want to draw it yourself, recursively printing each node and its children with indentation is easy, like

Code: Select all

sin
  /
    +
      *
        alpha
        2
      5
    57.29577951308232


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.

Re: Tree diagrams

Posted: Mon Oct 22, 2018 12:21 pm UTC
by Xanthir
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 http://software.hixie.ch/utilities/js/live-dom-viewer/; 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.