类似echarts图的思维导图效果,用js实现xmind思维导图的效果===使用jsMind来实现

 

首先：我先先来看看实现的效果：

然后我再说说具体实现的步骤吧：（别急文件后面我会把百度网盘链接发出来的，除了小案例外还有jsMind的文件，案例，目前的说明文档）

 第一：引入jsMind的css.js文件

      

第二：页面添加一个容器：

第三：也是最重要的js部分了（后面会有整个页面的代码）

好了，知道贴图大家肯定不得劲，我也是，网上找的资料不能拷贝真的很痛苦，下面是代码：

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

好了，这个思维导图就完成了，下面首先放百度网盘的链接。里面会有jsmind的css,jsmind的js，还有一个可以拖拽的js文件，

第二份是jsMind的文件，里面有官方案例，还有操作文档那些，最后我会把握了解的一些关于jsmind的内容分享一下

百度网盘地址：

1、里面是css,js

https://pan.baidu.com/s/1cH_dkFFZZni9PRz2sUU1bg      提取码：vycc

2、官方案例，文件，文档

https://pan.baidu.com/s/18sLQhD3hC-gTXYOVPkwa6Q     提取码： nrpv      

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

好了，关于这个思维导图的相关文件都在这里了，下面我在说说对jsMind的一些个人理解吧，因为我也百度了好多资料，发现对jsmind的一些相关资料是相当少的，可能大家用的也不多吧，在通过研究官方文档以后有了一些新的看法，

1、jsMind 支持三种数据格式，分别是树对象格式、表对象格式、freemind格式----这里资料摘取自官方文档

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

  // 三种格式
  		A. 树对象格式示例
  		var mind = {
  				    /* 元数据，定义思维导图的名称、作者、版本等信息 */
  				    "meta":{
  				        "name":"jsMind-demo-tree",
  				        "author":"[email protected]",
  				        "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"}
  				        ]}
  				    ]}
  				};
  		B. 表对象格式示例
  		var mind = {
  			    /* 元数据，定义思维导图的名称、作者、版本等信息 */
  			    "meta":{
  			        "name":"example",
  			        "author":"[email protected]",
  			        "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"},
  			    ]
  			};	
  		C. freemind格式示例
  		var mind = {
  			    /* 元数据，定义思维导图的名称、作者、版本等信息 */
  			    "meta":{
  			        "name":"example",
  			        "author":"[email protected]",
  			        "version":"0.2"
  			    },
  			    /* 数据格式声明 */
  			    "format":"freemind",
  			    /* 数据内容 */
  			    "data":""
  			};	

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

  好了，最主要的还是说这个数据格式的不同，三种，树状和表格我们可能用的多一点，第三种很少用了，最底下我会把网址分享一下，感兴趣的朋友可以深入研究下，这里面的文档更详细：

•                                    https://github.com/hizzgdev/jsmind/blob/master/docs/zh/1.usage.md