如何绘制思维导图

Question

我正在研究绘制思维导图的算法.重点是智能地安排节点,这样就没有重叠,看起来分布很好.作为示例,请参阅此屏幕截图(来自MindNode):

考虑到每个节点占用的空间,有关如何很好地安排这个结构的任何想法？你知道我可以研究的任何代码吗(有点像graphviz的东西)？

在它出现之前,我不是在寻找像这样的 "物理模拟"算法,或者像dot 这样的完成程序.最后我想在JS中实现它,但是为了理解算法,任何语言都可以.

Answer 1

我想你只能用 CSS 来做到这一点。使用 JS 为节点提供正确的类，CSS 将根据需要负责排列它们。

例如，您可以margin: 1em 0 1em 0在每个节点上进行设置，使其有足够的空间等等。