一个用JavaScript生成思维导图(mindmap)的github repo
2024-08-23 11:48:17
github 地址:https://github.com/dundalek/markmap
作者的readme写得很简单。
今天有同事问作者提供的例子到底怎么跑。这里我就写一个更详细的步骤出来。
首先查看example.parse.js的内容:
var fs = require('fs');
var parse = require('../parse.markdown');
var transform = require('../transform.headings');
var text = fs.readFileSync('gtor.md', 'utf-8');
var headings = parse(text);
var root = transform(headings);
console.log(root);
fs.writeFileSync('gtor.json', JSON.stringify(root));
使用nodejs命名node example.parse.js执行这段代码:代码读取包含思维导图的本地文件gtor.md, 解析并转换生成本地文件gtor.json.
然后查看example.view.js, 发现作者使用了d3来做UI的渲染。
d3.json("gtor.json", function(error, data) {
if (error) throw error;
markmap('svg#mindmap', data, {
preset: 'default', // or colorful
linkShape: 'diagonal' // or bracket
});
});
如果直接双击examples文件夹里的index.html文件在浏览器里打开,会出现跨域错误导致本地文件gtor.json无法访问:
必须把这个example部署到服务器上运行才行。
为了简单起见,我做了一个简单的封装。如果您想跑跑例子看看效果,只需要下载我的project到本地:https://github.com/i042416/jerrylist
直接在本地用nodejs 命令行启动服务器:
node local.js
然后localhost:3000/mindmap即可看到思维导图的效果
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
最新文章
- linux源码分析(一)
- Mina传输大数组,多路解码,粘包问题的处理
- CSS3动画(个人理解)
- const 指针的三种使用方式
- Text3d
- Ubuntu下修改system.img 解包system.img、打包system.img
- 第一个MySQL 存储过程
- 【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD
- HDOJ/HDU 1062 Text Reverse(字符串翻转~)
- perl tk说明
- MaltReport2:基于 OpenDocument/OpenOfficeXML 的报表引擎
- Docker存储驱动之OverlayFS简介
- 201521123075 《Java程序设计》第12周学习总结
- 内核知识第八讲,PDE,PTE,页目录表,页表的内存管理
- SAS 9.4 的sid问题解决方案汇总(头疼...)
- maven常见问题处理(3-4)配置代理服务器
- 三、Snapman多人协作电子表格之——软件的基本功能
- [Swift]LeetCode771. 宝石与石头 | Jewels and Stones
- 使用AES加密的勒索类软件分析报告
- 【python】进程与线程
热门文章
- jpa基于按annotation的hibernate主键生成策略
- 解决Python-OpenCV中cv2.rectangle报错
- Linux使用mount挂载Windows共享文件夹
- celery监控工具flower
- 免费好用的 Apple 工具(Windows 适用)
- Vue触发隐藏input file的方法
- OpenCV.3.4.6.附加依赖项
- 洛谷 题解 P1220 【关路灯 】
- JavaSE基础(七)--Java流程控制语句之switch case 语句
- js中的var a = new A;与var a = new A()的区别