在网页中显示（语法）树

Question

我希望能够在网页上显示动态语法树，可能还有jQuery组件。为了告诉你我的意思，这个

是一种语法树，这是我希望它显示的一般方式。

如何使用HTML和CSS构建类似的内容？

编辑：解决方案

以防后来发现这个问题的人正在尝试同样的事情，这就是我所做的：

我最终使用Graphviz作为SVG绘制树，然后使用一些魔法将svg树移动到DOM中。这样我仍然可以与元素进行交互，例如拖放或悬停/点击事件。

结果可见here。

Answer 1

尝试d3，它有一个非常好的tree visualization

Answer 2

另一个选项是ArborJs，您可以找到介绍here