Question

输入：

（1）带有标记内部节点的树的括号表示，例如：

(S (N John) (VP (V hit) (NP (D the) (N ball))))

带输出：

enter image description here

（线是否为虚线以及字幕是否存在并不重要。）

或输入可能是：

（2）对没有标签的单词进行包围，例如：

((John) ((hit) ((the) (ball))))

输出与上面相同（这次没有内部标签，只有树形结构）。

输入的另一个组成部分是树是标记为（1）还是未标记为（2）。

我的问题：在javascript中在浏览器中呈现这些树的最佳方法（最快的开发时间）是什么？一切都应该发生在客户端。

我想象一个简单的界面只有一个文本框（和一个单选按钮，指定它是否是标记的树），当更改时，触发树渲染（如果输入没有任何语法错误）。

Answer 1

我不确定stackoverflow上的自我插件策略是什么。如果违反规则我会道歉。

你有没有看到我的解决方案？ mshang.ca/syntree

这不完全是你想要的，但如果它有帮助，你可以自由地窃取code。

Answer 2

实际上有服务器端库可以将括号中的表示转换为树phpsyntaxtree 您可以使用javascript图形库（如jsdraw2d）重新实现它们，或使用HTML5画布在javascript上滚动。