jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。
jsMind is a pure javascript library for mindmap, it base on html5 canvas. jsMind was released under BSD license, you can embed it in any project, if only you observe the license.

文章目录

1.JsMind
- 1.1基本框架
- 1.2数据格式
- - 树对象格式示例
  - 表对象格式示例
  - freemind格式示例
- 1.3关于主题
2.jsMind对象
- 2.1查找节点
- - Tips
- 2.2操作节点
- 2.3编辑节点
- 2.4设置样式
- 2.5获取数据
- 2.6其他

1.JsMind

jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。

1.1基本框架

首先，需要在页面上引用 jsmind.js 和 jsmind.css 两个文件。

<link type="text/css" rel="stylesheet" href="style/jsmind.css" />
<script type="text/javascript" src="js/jsmind.js"></script>

如果希望能够通过鼠标拖拽的方式移动节点，需要额外引用 jsmind.draggable.js 文件

<script type="text/javascript" src="js/jsmind.draggable.js"></script>

其次，要为 jsMind 准备一个容器，jsMind 将在这个容器里显示思维导图。可自行定义容器的id、大小及样式。

<div id="jsmind_container"></div>

最后，添加下面一段代码即可显示一个空白的思维导图：

<script type="text/javascript">var options = {                   // options 将在下一章中详细介绍container:'jsmind_container', // [必选] 容器的ID，或者为容器的对象editable:true,                // [可选] 是否启用编辑theme:'orange'                // [可选] 主题};var jm = new jsMind(options);jm.show();</script>

1.2数据格式

jsMind 支持三种数据格式，分别是树对象格式、表对象格式、freemind格式。jsMind 可以加载其中任一种格式，也能将数据导出为任一种格式。

树对象格式 默认格式，节点之间是包含关系，便于程序进行处理，适合与 MongoDB 及其它文档型数据库进行数据交互；
表对象格式 节点之间是并列关系，使用 parentid 标识上下级关系，适合与关系型数据库进行数据交互；
freemind格式 使用 freemind 的 xml 格式，适合与 freemind 进行数据交互。

除 freemind 格式外，其余两种格式的基本数据结构如下：

 {"id":"open",           // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略"topic":"Open Source", // [必选] 节点上显示的内容"direction":"right",   // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right"expanded":true,       // [可选] 该节点是否是展开状态，默认为 true}

下面是三种数据格式的简单示例：

树对象格式示例

var mind = {/* 元数据，定义思维导图的名称、作者、版本等信息 */"meta":{"name":"jsMind-demo-tree","author":"hizzgdev@163.com","version":"0.2"},/* 数据格式声明 */"format":"node_tree",/* 数据内容 */"data":{"id":"root","topic":"jsMind","children":[{"id":"easy","topic":"Easy","direction":"left","expanded":false,"children":[{"id":"easy1","topic":"Easy to show"},{"id":"easy2","topic":"Easy to edit"},{"id":"easy3","topic":"Easy to store"},{"id":"easy4","topic":"Easy to embed"}]},{"id":"open","topic":"Open Source","direction":"right","expanded":true,"children":[{"id":"open1","topic":"on GitHub"},{"id":"open2","topic":"BSD License"}]},{"id":"powerful","topic":"Powerful","direction":"right","children":[{"id":"powerful1","topic":"Base on Javascript"},{"id":"powerful2","topic":"Base on HTML5"},{"id":"powerful3","topic":"Depends on you"}]},{"id":"other","topic":"test node","direction":"left","children":[{"id":"other1","topic":"I'm from local variable"},{"id":"other2","topic":"I can do everything"}]}]}
};

表对象格式示例

var mind = {/* 元数据，定义思维导图的名称、作者、版本等信息 */"meta":{"name":"example","author":"hizzgdev@163.com","version":"0.2"},/* 数据格式声明 */"format":"node_array",/* 数据内容 */"data":[{"id":"root", "isroot":true, "topic":"jsMind"},{"id":"easy", "parentid":"root", "topic":"Easy", "direction":"left"},{"id":"easy1", "parentid":"easy", "topic":"Easy to show"},{"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},{"id":"easy3", "parentid":"easy", "topic":"Easy to store"},{"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},{"id":"open", "parentid":"root", "topic":"Open Source", "expanded":false, "direction":"right"},{"id":"open1", "parentid":"open", "topic":"on GitHub"},{"id":"open2", "parentid":"open", "topic":"BSD License"},{"id":"powerful", "parentid":"root", "topic":"Powerful", "direction":"right"},{"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},{"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},{"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"},]
};

freemind格式示例

var mind = {/* 元数据，定义思维导图的名称、作者、版本等信息 */"meta":{"name":"example","author":"hizzgdev@163.com","version":"0.2"},/* 数据格式声明 */"format":"freemind",/* 数据内容 */"data":"<map version=\"1.0.1\"> <node ID=\"root\" TEXT=\"jsMind\" > <node ID=\"easy\" POSITION=\"left\" TEXT=\"Easy\" > <node ID=\"easy1\" TEXT=\"Easy to show\" /> <node ID=\"easy2\" TEXT=\"Easy to edit\" /> <node ID=\"easy3\" TEXT=\"Easy to store\" /> <node ID=\"easy4\" TEXT=\"Easy to embed\" /> </node> <node ID=\"open\" POSITION=\"right\" TEXT=\"Open Source\" > <node ID=\"open1\" TEXT=\"on GitHub\" /> <node ID=\"open2\" TEXT=\"BSD License\" /> </node> <node ID=\"powerful\" POSITION=\"right\" TEXT=\"Powerful\" > <node ID=\"powerful1\" TEXT=\"Base on Javascript\" /> <node ID=\"powerful2\" TEXT=\"Base on HTML5\" /> <node ID=\"powerful3\" TEXT=\"Depends on you\" /> </node> <node ID=\"other\" POSITION=\"left\" TEXT=\"test node\" > <node ID=\"other1\" TEXT=\"I'm from local variable\" />
};

1.3关于主题

jsMind 默认提供了 15 种主题。当然，你也可以添加自己的主题。只需在 jsmind.css 中按照以下格式添加样式定义即可：

/* greensea theme */                                                      /* greensea 即是主题名 */
jmnodes.theme-greensea jmnode{background-color:#1abc9c;color:#fff;}       /* 节点样式 */
jmnodes.theme-greensea jmnode:hover{background-color:#16a085;}            /* 鼠标悬停的节点样式 */
jmnodes.theme-greensea jmnode.selected{background-color:#11f;color:#fff;} /* 选中的节点样式 */
jmnodes.theme-greensea jmnode.root{}                                      /* 根节点样式 */
jmnodes.theme-greensea jmexpander{}                                       /* 展开/关闭节点的控制点样式 */
jmnodes.theme-greensea jmexpander:hover{}                                 /* 鼠标悬停展开/关闭节点的控制点样式 */

2.jsMind对象

jsMind 提供了对思维导图进行操控的一系列 API，这些 API 都是基于 jsMind 对象处理的，一般情况下可以使用下面的代码获取 jsMind 对象：

/*
方法1：创建思维导图时即可获得 jsMind 对象
*/
var jm = new jsMind(options);/*
方法2：当前页面已存在一个思维导图时可直接获得此 jsMind 对象当在一个页面里创建了多个 jsMind 时，此方法获得的是最后创建的那个对象
*/
var jm = jsMind.current;

2.1查找节点

获取根节点 : 使用 jm.get_root() 即可获取当前思维导图的根节点。

根据 id 查找节点 : 使用 jm.get_node(nodeid) 方法即可根据 id 查找当前思维导图中指定的节点，如果查找不到则返回 null。

获取选中的节点 : 使用 jm.get_selected_node() 方法即可获取当前选中的节点，如果没有选中的节点则返回 null。

查找相邻的节点 : 使用 jm.find_node_before(node|nodeid) 和 find_node_after(node|nodeid) 即可获取指定的节点的上一个或下一个节点，如果没有上一个或下一个，则返回 null。

获取父节点 : 使用 node.parent 即可获取父节点，根节点的父节点为 null。

获取子节点集合 : 使用 node.children 即可获取子节点的集合。

Tips

思维导图是由多个节点和节点之间的连线组成的，一个思维导图有一个根节点，根节点外围可以有多个子节点，子节点还可以有多个子节点。每个节点包含以下的多个属性：

node {id,        //  : string                    节点idindex,     //  : integer                   节点序号topic,     //  : string                    节点主题isroot,    //  : boolean                   指示该节点是否为根节点parent,    //  : node                      该节点的父节点，根节点的父节目为 null ，但请不要根据此属性判断该节点是否为根节点direction, //  : enum(left,center,right)   该节点的分布位置children,  //  : array of node             该节点的子节点组合expanded,  //  : boolean                   该节点的下级节点是否展开data,      //  : object{string,object}     该节点的其它附加数据
}

2.2操作节点

选中节点 : 使用 `jm.select_node(node) 方法选中指定的节点。

收起子节点 : 使用 jm.collapse_node(node|nodeid) 方法可收起该节点的子节点。

展开子节点 : 使用 jm.expand_node(node|nodeid) 方法可展开该节点的子节点。

收起或展开子节点 : 使用 jm.toggle_node(node|nodeid) 方法可自动展开或收起子节点。

展开全部子节点 : 使用 jm.expand_all() 方法可展开全部子节点。

展开至层级 : 使用 jm.expand_to_depth(depth) 方法可展开到指定层级。

移动节点 : 使用 jm.move_node(node|nodeid,beforeid) 方法可将该节点移动到 beforeid 节点之前，可将 beforeid 设为 _first_或_last可将该节点移动到相邻节点的最前或最后。

启用编辑 : 使用 jm.enable_edit() 方法可启用对当前思维导图的编辑功能。

禁止编辑 : 使用 jm.disable_edit() 方法可禁止对当前思维导图进行编辑。

编辑节点 : 使用 jm.begin_edit(node|nodeid) 方法可以将该节点调整为编辑状态。

停止编辑 : 使用 jm.end_edit() 方法可以将该节点调整为只读状态。

2.3编辑节点

添加节点 : 使用 jm.add_node(parent_node, nodeid, topic, data) 方法可添加一个节点。

在指定位置前插入节点 : 使用 jm.insert_node_before(node_before, nodeid, topic, data) 方法可在 node_before 节点前插入节点。

在指定位置后插入节点 : 使用 jm.insert_node_after(node_after, nodeid, topic, data) 方法可在 node_after 节点后插入节点。

删除节点 : 使用 jm.remove_node(node|nodeid) 方法可删除指定的节点及其所有的子节点。

更新节点 : 使用 jm.update_node(nodeid, topic) 方法可更新指定节点的 topic，其它属性由于不在界面上显示，可以直接修改对应 node 的属性。

2.4设置样式

设置主题 : 使用 jm.set_theme(theme) 方法可设置当前思维导图的主题。

设置背景色/前景色 : 使用 jm.set_node_color(nodeid, bgcolor, fgcolor) 方法可设置指定节点的背景色与前景色。

设置字体 : 使用 jm.set_node_font_style(nodeid, size, weight, style) 方法可设置指定节点的字体。

设置背景图片 : 使用 jm.set_node_background_image(nodeid, image, width, height) 方法可设置指定节点的背景图片。

2.5获取数据

获取元数据 : 使用 jm.get_meta() 方法可获取当前思维导图的元数据。

获取数据 : 使用 jm.get_data(data_format) 方法可获取当前思维导图的指定格式的数据文本。

2.6其他

清除节点的选中 : 使用 jm.select_clear() 方法可以清除当前的选中状态。

判断节点是否可见 : 使用 jm.is_node_visible(node) 方法可以判断此节点是否显示。

一篇文章带你了解jsMind相关推荐

一篇文章带你了解Flannel
from: http://dockone.io/article/618 DockOne技术分享(十八):一篇文章带你了解Flannel [编者的话]Flannel是 CoreOS 团队针对 Kuber ...
一篇文章带你详解 TCP/IP 协议（下）
前面的第一二三章已在上篇讲解,还没看过的可以先看看:一篇文章带你详解 TCP/IP 协议(上) 本文继续讲解第四章. 四.网络层中的 IP 协议 IP(IPv4.IPv6)相当于 OSI 参考模型中的 ...
一篇文章带你详解 HTTP 协议（下）
文章目录,方便阅读: 一.概述(已讲) 二.HTTP 工作过程(已讲) 三.HTTP 协议基础(已讲) 四.HTTP 协议报文结构(已讲) 五.HTTP 报文首部之请求行.状态行(已讲) 六.HTTP ...
一篇文章带你快速理解JVM运行时数据区、程序计数器详解（手画详图）值得收藏！！！
受多种情况的影响,又开始看JVM 方面的知识. 1.Java 实在过于内卷,没法不往深了学. 2.面试题问的多,被迫学习. 3.纯粹的好奇. 很喜欢一句话:"八小时内谋生活,八小时外谋发展. ...
java 不重启部署_一篇文章带你搞定SpringBoot不重启项目实现修改静态资源
一.通过配置文件控制静态资源的热部署在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.res ...
一篇文章带你熟悉 TCP/IP 协议（网络协议篇二）
涤生_Woo 2017年11月11日阅读 15544 关注一篇文章带你熟悉 TCP/IP 协议(网络协议篇二) 同样的,本文篇幅也比较长,先来一张思维导图,带大家过一遍. 一图看完本文一. 计算机 ...
一篇文章带你领悟 Frida 的精髓（基于安卓8.1）
转载(一篇文章带你领悟Frida的精髓(基于安卓8.1)):https://www.freebuf.com/articles/system/190565.html <Frida操作手册>: ...
一篇文章带你熟悉 TCP/IP 协议-（三）
一篇文章带你熟悉 TCP/IP协议-(一)-https://segmentfault.com/a/11... 一篇文章带你熟悉 TCP/IP协议-(二)-https://segmentfault.co ...
乐鑫esp8266学习rtos3.0笔记第3篇：一篇文章带你搞掂存储技术 NVS 的认识和使用，如何利用NVS保存整型、字符串、数组以及结构体。（附带demo）
本系列博客学习由非官方人员半颗心脏潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. Esp8266之搭建开发环境,开始一个" ...
一篇文章带你认识数学建模中的二维插值
本篇文章主要是认识数学建模中的二维插值二维插值的具体计算可参考:一篇文章带你搞定二维插值的 MATLAB 计算文章目录一.引言二.网格节点的概念三.散乱节点的概念四.二维插值的常见方法 1 ...

一篇文章带你了解jsMind