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

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                    节点id
    index,     //  : 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) 方法可以判断此节点是否显示。

# javascript # 开发语言 # html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟