JsMind 是一个开源 js 库,以节点及线条绘制思维导图,效果如下
效果还是非常棒的~
jsMind 提供的功能较多:动态增加/删除节点, 收缩/展开子节点,定制思维导图/绘图区大小,主题独立于代码,很方便地替换主题,支持增加事件绑定。
jsMind 使用起来也非常方便,如果不使用拖拽功能,则它只包括 jsMind.js 和 jsMind.css 两个文件,我们都引入到前端代码中即可使用。在 option 对象中指定绘制区后,通过以下几步即可展示:var jm = new Jsmind(option) ,jm.show(); 还可通过 jm.add_node 增加节点。
具体使用方法 jsMind 有文档及示例指出。
然而,jsMind 有几个缺点:
1.不能体现出数据流向性,没有箭头。
2.不能细粒度地定制每个节点的主题。
为此,改进了这个 jsMind,达到的目标是:
1.支持曲线画箭头,箭头的方向应沿着曲线线条末端的切线。
2.支持箭头从父节点指向子节点,也支持从子节点指向父节点。
3.支持每个节点不同主题。
4.智能地根据父子节点的位置,选择贝塞尔曲线的画法(向哪边弯曲)
手段是引入 Arrows with canvas ,并且适当修改 jsMind 相应代码。已上传作为备份。