d3+markmap-view实现是思维导图效果代码
代码语言:html
所属分类:图表
代码描述:d3+markmap-view实现是思维导图效果代码,通过对象来生成思维导图。
代码标签: d3 markmap-view 思维 导图
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } #mindmap { display: block; width: 100vw; height: 100vh; } </style> </head> <body> <svg id="mindmap"></svg> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.6.2.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/markmap-view.0.1.1.js"></script> <script> ((e, t) => { const { Markmap: r } = e(); window.mm = r.create("svg#mindmap", null, t) })(() => window.markmap, { "t": "heading", "d": 1, "p": {}, "v": "Github_Pages", "c": [{ "t": "heading", "d": 2, "p": {}, "v": "Jeykll", "c": [{ "t": "heading", "d": 3, "p": {}, "v": "Themes", "c": [{ "t": "heading", "d": 4, "p": {}, "v": "<a href=\"https://github.com/pages-themes/cayman\">Cayman Theme</a>" }, { "t": "heading", "d": 4, "p": {}, "v": "<a href=\"yk-liu.github.io\">yk-liu.github.io</a>" }, { "t": "heading", "d": 4, "p": {}, "v": "<a href=\"github.com/kitian616/jekyll-TeXt-theme\">TeXt-theme</a>" }] }] }, { "t": "heading", "d": 2, "p": {}, "v": "Markdown", "c": [{ "t": "heading", "d": 3, "p": {}, "v": "JohnGruber" }, { "t": "heading", "d": 3, "p": {}, "v": "hackmd.io" }, { "t": "heading", "d": 3, "p": {}, "v": "syntaxes", "c": [{ "t": "list_i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0