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库,它可以无缝地融入到任何Web项目中,无论你是前端开发者还是网页设计师,都可以轻松地将其整合进自己的项目。通过简单的API调用,你可以快速创建、编辑和展示思维导图,极大地提升了开发效率。...
使用JavaScript思维导图插件的益处: 1. **易用性**:用户可以通过简单的拖放操作添加、删除和重新排列节点,使得思维导图的创建直观且快速。 2. **实时协作**:在Web应用中集成后,多人可以同时编辑同一张思维导图...
javascript思维导图 基础知识点 用于巩固基础 javascript思维导图 基础知识点 用于巩固基础javascript思维导图 基础知识点 用于巩固基础javascript思维导图 基础知识点 用于巩固基础
JavaScript,作为全球最广泛...JavaScript思维导图作为一个有效的学习工具,可以帮助初学者梳理这些概念,提升学习效率。在实际开发过程中,不断实践和探索,将理论知识转化为实际技能,才能真正成为JavaScript的大师。
- **地图部分添加**:可以从一个思维导图复制部分结构到另一个思维导图中,便于共享和重用。 #### 四、跨平台支持与技术细节 - **macOS支持**:针对macOS操作系统进行了优化,支持特定的功能和快捷键。 - **命令行...
总结归纳了我使用Github的一些经验
下载最新版本的 com.sctmes.kity-minder.jpl 和 com.sctmes.kity-minder.json 文件,并放入同一个文件夹 2 打开Joplin的 “工具\选项\插件” 菜单,点击 “管理你的插件”,选择 “从文件安装”,选择对应的 ...
根据压缩包子文件的文件名称列表“text2mindmap-master”,我们可以推测这是一个名为“text2mindmap”的项目,而且很可能是一个GitHub仓库的克隆。"master"分支通常是GitHub上默认的主要分支,包含了项目最新的稳定...
Java的思维导图模型,自己上课和下课的总结,不喜勿喷
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,...接着,结合这些思维导图主要参考的资料,分享一下我的学习体验,一方面可供初学者参考,另一方面,也便于大家结合思维导图深入学习、理解、思考;
博客《GitHub思维导图学习(图里知多少,点进来看看?)》中提供的GitHub学习思维导图(内涵.pnd、.pdf、.xmind文件)
Github基本知识思维导图.xmind
支持将一个主题拖放到另一个主题以重新组织思维导图。 打开并保存文件 保存并打开 .bmind 文件,双击文件即可打开。 将主题导出到图像 将主题导出到 png/jpg/svg。 将图像插入主题 每个主题都可以插入无限个图像...
标题 "github_repo_matlab_" 暗示这是一个与 MATLAB 相关的 GitHub 仓库,可能包含了一些 MATLAB 代码或工具。描述中的 "thank you tahnk you sorry very much" 是一种表达感谢的方式,可能意味着作者对贡献者或者...
在这个"Python编程(思维导图)(1).zip"压缩包中,包含了"入学视频.MP4"和"Python编程(思维导图)"两个文件,它们旨在为初学者提供一个全面的学习框架。 1. **Python编程基础**: - 变量与数据类型:Python支持...
git知识点思维导图,更全面的git知识结构,让你快速全面了解和学习git工具! xmind源文件,可修改编辑
My Mind 是一个基于 Web 的思维导图绘制工具,免费而且完全开源。My Mind 大多数采用键盘进行操作。 在线演示:http://my-mind.github.io/ 标签:mymind
git常用命令总结 git命令思维导图
使用repo管理github项目例子
在matlab中的sklearn工具箱