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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

一个用JavaScript生成思维导图(mindmap)的github repo的更多相关文章

  1. JavaScript如何生成思维导图(mindmap)

    JavaScript如何生成思维导图(mindmap) 一.总结 一句话总结:可以直接用gojs gojs 二.一个用JavaScript生成思维导图(mindmap)的github repo(转) ...

  2. 【xmind】 使用 Java 生成思维导图

    前言 在日常的工作与学习中,我们经常会使用思维导图这个工具,来把抽象而又无形的思考转换成有形并且具体的图像,是理清思路,梳理逻辑的一大神器. 准确的说,思维导图并不是一个具体的工具,而是一种方法.是道 ...

  3. HTML,CSS,JavaScript的思维导图

    一个思维导图是把抽象的事物具体化,以一个东西为思想核心内容,映射出一系列的组成及作用 影响的内容. HTML的思维导图 HTML是一种超文本标记语言.我认为要学习一门语言首先要知道其是什么,编辑工具是 ...

  4. XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生

    XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生 https://www.xmind.cn/

  5. Javascript前端思维导图

    思维导图小tips: 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出 ...

  6. JavaScript知识思维导图

    知识点:(图片为网络转载,谢谢分享.) JavaScript 变量 JavaScript 数据类型 JavaScript 字符串函数 Javascript 运算符 JavaScript 流程控制 Ja ...

  7. JavaScript知识点 思维导图

    javascript变量 javascript数据类型 javascript运算符 javascript流程语句 javascript数组 javascript字符串函数 javascript函数基础 ...

  8. javascript基础 思维导图2

    来源于:http://www.cnblogs.com/xianyulaodi/p/5886128.html 1.javascript数据类型 2.javascript数组 3.javascript运算 ...

  9. 【原创】javascript——事件思维导图

随机推荐

  1. nginx使用vhost子目录

    在主配置文件http模块最后添加如下一句话 [root@host---- ~]# vi /etc/nginx/nginx.conf include /etc/nginx/conf.d/*.conf; ...

  2. 分析UIS-RNN源代码的代码规范和风格

    结合工程实践选题相关的一套源代码,根据其编程语言或项目特点,分析其在源代码目录结构.文件名/类名/函数名/变量名等命名.接口定义规范和单元测试组织形式等方面的做法和特点: 列举哪些做法符合代码规范和风 ...

  3. OpenGL学习(4)——纹理

    拖了半个多月的博客,这次学习如何使用纹理(Texture)贴图来实现更多的细节. 生成纹理对象 和创建VAO.VBO方法类似,调用glGenTextures函数. glGenTextures(1, & ...

  4. CentOS修改主机名称

    centos6 或者centos7修改主机名称的方式 centos6 修改主机名 [root@centos6 ~]$ hostname # 查看当前的hostnmae centos6.com [roo ...

  5. Linear regression with one variable - Model representation

    摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第二章<单变量线性回归>中第6课时<模型概述>的视频原文字幕.为本人在视频学习过程中逐字逐句记录下 ...

  6. NMS(Non-Maximum Suppression) 非极大值抑制

    NMS  非极大值抑制:找到局部最大值,并删除邻域内其他的值. 简单说一下流程: 首先剔除背景(背景无需NMS),假设有6个边界框,根据分类置信度对这6个边界框做降序排列,假设顺序为A.B.C.D.E ...

  7. AnroidStudio gradle版本和android插件的版本依赖

  8. 1-2-K Game

    题目链接:https://vjudge.net/contest/330119#problem/E 题目大意可以理解为: 1.给出n个物品以及k,Alice与Bob轮流拿1个,或2个,或k个物品,Ali ...

  9. [bzoj3060][Poi2012]Tour de Byteotia_并查集

    [Poi2012]Tour de Byteotia 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3060 题解: 这类题有一个套路,就是 ...

  10. random、range和len函数的使用

    random.range和len函数的使用 一.random函数 1.random.random()和random.Random(): import random num = random.rando ...