一个用JavaScript生成思维导图(mindmap)的github repo

gekylin 发布于2019-07-01 12:28 / 3741人阅读

摘要：首先查看的内容使用命名执行这段代码代码读取包含思维导图的本地文件解析并转换生成本地文件然后查看发现作者使用了来做的渲染。为了简单起见，我做了一个简单的封装。

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即可看到思维导图的效果

GPU云服务器云服务器 javascript思维导图好看的c语言思维导图思维导图日本思维导图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30777.html

一个用JavaScript生成思维导图(mindmap)的github repo

摘要：首先查看的内容使用命名执行这段代码代码读取包含思维导图的本地文件解析并转换生成本地文件然后查看发现作者使用了来做的渲染。为了简单起见，我做了一个简单的封装。 github 地址：https://github.com/dundalek/markmap 作者的readme写得很简单。今天有同事问作者提供的例子到底怎么跑。这里我就写一个更详细的步骤出来。 showImg(https://s...

Mr_houzi 2019-08-22 17:11 评论0 收藏0
一个用JavaScript生成思维导图(mindmap)的github repo

摘要：首先查看的内容使用命名执行这段代码代码读取包含思维导图的本地文件解析并转换生成本地文件然后查看发现作者使用了来做的渲染。为了简单起见，我做了一个简单的封装。 github 地址：https://github.com/dundalek/markmap 作者的readme写得很简单。今天有同事问作者提供的例子到底怎么跑。这里我就写一个更详细的步骤出来。 showImg(https://s...

ziwenxie 2019-08-02 10:24 评论0 收藏0