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

首先：我先先来看看实现的效果：然后我再说说具体实现的步骤吧：（别急文件后面我会把百度网盘链接发出来的，除了小案例外还有jsMind的文件，案例，目前的说明文档）第一：引入jsMind的css.js文件第二：页面添加一个容器：第三：也是最重要的js部分了（后面会有整个页面的代码）好了，知道贴图大家肯定不得劲，我也是，网上找的资料不能拷贝真的...

浩星

32480人浏览 · 2019-03-14 14:48:36

浩星 · 2019-03-14 14:48:36 发布

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<title>jsmindd</title>
</head>
<link rel="stylesheet" href="css/jsmind.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jsmind.js"></script>
<script type="text/javascript" src="js/jsmind.draggable.js"></script>
<body>
	 <div id="jsmind_container" style="width: 1000px;height: 1000px;"></div>
</body>
</html>
<script>
		var mind = {
            "meta":{
                "name":"jsMind remote",
                "author":"hizzgdev@163.com",
                "version":"0.2"
            },
            "format":"node_tree",
            "data":{"id":"root","topic":"jsMind","children":[
                {"id":"easy","topic":"Easy","direction":"left","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":"other3","background-image":"ant.png", "width": "100", "height": "100"}
                ]},
                {"id":"open","topic":"Open Source","direction":"right","children":[
                    {"id":"open1","topic":"on GitHub", "background-color":"#eee", "foreground-color":"blue"},
                    {"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"}
                ]}
            ]}
        }
		// jsMind的选项，更多参数参见jsMind的文档
		// https://github.com/hizzgdev/jsmind/blob/master/docs/zh/index.md
		var options = {
		    container:'jsmind_container',//容器的ID
		    editable:false,				// 是否启用编辑
		    theme:'primary'				//主题

		    	//options的属性
		    	//container : '',         // [必选] 容器的ID
			   // editable : false,       // 是否启用编辑
			   // theme : null,           // 主题
			   // mode :'full',           // 显示模式========full - 子节点动态分布在根节点两侧 [默认值] side - 子节点只分布在根节点右侧
			   // support_html : true,    // 是否支持节点里的HTML元素
			   // view:{
			   //     hmargin:100,        // 思维导图距容器外框的最小水平距离
			   //     vmargin:50,         // 思维导图距容器外框的最小垂直距离
			   //     line_width:2,       // 思维导图线条的粗细
			   //     line_color:'#555'   // 思维导图线条的颜色
			   // },
			   // layout:{
			   //     hspace:30,          // 节点之间的水平间距
			   //     vspace:20,          // 节点之间的垂直间距
			   //     pspace:13           // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
			   // },
			   // shortcut:{
			   //     enable:true,        // 是否启用快捷键
			   //     handles:{},         // 命名的快捷键事件处理器
			   //     mapping:{           // 快捷键映射
			   //         addchild   : 45,    // <Insert>
			   //         addbrother : 13,    // <Enter>
			   //         editnode   : 113,   // <F2>
			   //         delnode    : 46,    // <Delete>
			   //         toggle     : 32,    // <Space>
			   //         left       : 37,    // <Left>
			   //         up         : 38,    // <Up>
			   //         right      : 39,    // <Right>
			   //         down       : 40,    // <Down>
			   //     }
			   // },
		}
		var jm = new jsMind(options);


		jm.show(mind);
		//jm.disable_edit();//禁止编制
		jm.expand_all();//展开全部节点
		jm.add_node(parent_node, nodeid, topic, data);//添加节点


		console.log(jm.get_root());
	
</script>

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

好了，这个思维导图就完成了，下面首先放百度网盘的链接。里面会有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

最新：https://pan.baidu.com/s/1KA3RN7FS1_5300xQmfdyXA 提取码： 28bc

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

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

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

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

freemind格式 使用 freemind 的 xml 格式，适合与 freemind 进行数据交互。

// 三种格式
		A. 树对象格式示例
		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"}
				        ]}
				    ]}
				};
		B. 表对象格式示例
		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"},
			    ]
			};	
		C. 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\" /> <node ID=\"other2\" TEXT=\"I can do everything\" /> </node> </node> </map>"
			};

注：
		除 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

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

所有评论(0)

查看更多评论

浩星

@qq_41619796

已为社区贡献1条内容