一个用JavaScript生成思维导图(mindmap)的github repo
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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Chrome开发者工具中Elements(元素)断点的用途
SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间。 需求:需要找到哪行JavaScript代码不断刷新的按钮文字。 按照经验判断,这个文字肯定是一个JavaScript function通过setTimeout每隔一秒执行的。如何快速找到这个function以及setTimeout的调用位置呢? 1. 利用Chrome开发者工具的Elements标签页功能,找到该按钮HTML源代码对应的标签。 2. 右键单击该标签,选择Break on->subtree modification: 一秒钟之后,断点会自动触发,停留在该元素的innerHTML发生变化的代码位置。从代码478我们得知,UI上按钮的文字能够刷新,是因为其dom元素的innerHTML属性被修改的缘故。 从调用栈也能迅速找到setTimeout的调用位置和调用间隔(1秒) 更多Jerry的Chrome开发者工具使用心得,请参考Jerry的公众号文章:Jerry和您聊聊Chrome开发者工具要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:...
- 下一篇
图片地址是BASE64的图片上传(头像上传)
1 package controller; 2 3 import java.io.FileOutputStream; 4 import java.io.IOException; 5 import java.io.OutputStream; 6 7 import javax.servlet.http.HttpServletRequest; 8 import sun.misc.BASE64Decoder; 9 import org.springframework.stereotype.Controller; 10 import org.springframework.web.bind.annotation.RequestMapping; 11 import org.springframework.web.bind.annotation.ResponseBody; 12 13 @Controller 14 public class UsersMessageController { 15 private String path; 16 @RequestMapping("insert") 17 ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Linux系统CentOS6、CentOS7手动修改IP地址
- 2048小游戏-低调大师作品
- CentOS8安装Docker,最新的服务器搭配容器使用
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16