這篇文章主要講解了“怎么用JavaScript生成思維導圖”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用JavaScript生成思維導圖”吧！
首先查看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部署到服務器上運行才行。
直接在本地用nodejs 命令行啟動服務器：
node local.js
然后localhost:3000/mindmap即可看到思維導圖的效果
感謝各位的閱讀，以上就是“怎么用JavaScript生成思維導圖”的內容了，經過本文的學習后，相信大家對怎么用JavaScript生成思維導圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
