HTML5思维脑图插件推荐

一、jsMind

**
jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。你可以在此浏览适用于 jsMind 的 BSD 许可协议(中英文版本)。

官网地址

在这里插入图片描述

核心代码

<div id="jsmind_container"></div>
<script type="text/javascript" src="../js/jsmind.js"></script>
<script type="text/javascript" src="../js/jsmind.draggable.js"></script>
<script type="text/javascript" src="../features/jsmind.shell.js"></script>
<script type="text/javascript">var _jm = null;function load_jsmind(){var mind = {meta:{name:'公司组织架构图',author:'poya',version:'0.2'},format:'node_array',data:[{"id":"root", "isroot":true, "topic":"X科技有限公司"},{"id":"sub1", "parentid":"root", "topic":"国际部"},{"id":"sub11", "parentid":"sub1", "topic":"美国国际部"},{"id":"sub12", "parentid":"sub1", "topic":"德国国际部"},{"id":"sub13", "parentid":"sub1", "topic":"俄罗斯国际部"},{"id":"sub2", "parentid":"root", "topic":"营销部"},{"id":"sub21", "parentid":"sub2", "topic":"商务中心"},{"id":"sub22", "parentid":"sub2", "topic":"销售部"},{"id":"sub23", "parentid":"sub2", "topic":"售后服务部"},{"id":"sub3", "parentid":"root", "topic":"监察部"},{"id":"sub4", "parentid":"root", "topic":"质管部"},{"id":"sub41", "parentid":"sub4", "topic":"质管部"},{"id":"sub42", "parentid":"sub4", "topic":"质检部"},]};var options = {container:'jsmind_container',editable:true,theme:'primary',shortcut:{handles:{test:function(j,e){console.log(j);}},mapping:{test:89}}}_jm = jsMind.show(options,mind);// jm.set_readonly(true);// var mind_data = jm.get_data();// alert(mind_data);}function load_file(fi){var files = fi.files;if(files.length > 0){var file_data = files[0];jsMind.util.file.read(file_data, function(freemind_data, jsmind_name){var mind = jsmind_data;if(!!mind){_jm.show(mind);}else{console.error('can not open this file as mindmap');}});}}function save_nodetree(){var mind_data = _jm.get_data('node_tree');console.log(mind_data);}function replay(){var shell = _jm.shell;if(!!shell){shell.replay();}}load_jsmind();
</script>

jsMind功能特点：代码简单；轻量级的，适合web使用，支持一键保存图片，切换、放大于缩小、添加删除、移动节点、折叠与展开分级、支持导入与导出
**

二、HTML5 D3.js

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作
在这里插入图片描述
更多了解请访问官网地址