index.html内容:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>Web思维导图</title><link rel="stylesheet" href="css/prism.css"><link rel="stylesheet" href="css/common.css">
</head>
<body>
<h3>Web思维导图，梳理Hacker知识点为例：
</h3>
<div id="drawing" class="drawing"></div>
<div class="modal" id="modal"><div class="modal-bg"><div class="modal-content"><div class="modal-cell"><pre class="modal-code"><code class="language-html"></code></pre></div></div><div class="modal-close"></div></div><div class="modal-mask"></div>
</div>
<iframe class="code_iframe" id="html_code" src="bs_introduction/code_container.html"></iframe>
<script src="js/d3_flex_tree.js"></script>
<script src="js/mind_mapping.js"></script>
<script src="js/prism.js"></script>
</body>
</html>

CSS文件夹

common.css:

body{height: 100%;margin: 0;overflow: hidden;
}.clear-fix:before,.clear-fix:after{display: table;content: '';clear: both;
}.code_iframe{display: none;
}.drawing{visibility: hidden;font-weight: bold;border: 1px solid #ccc;animation: drawingframe;animation-duration: 1s;animation-timing-function: linear;animation-delay: 1s;-webkit-animation: drawingframe 1s linear 1s;
}
@keyframes drawingframe
{from {opacity: 0;}to {opacity: 1;}
}
@-webkit-keyframes drawingframe
{from {opacity: 0;}to {opacity: 1;}
}.node g{cursor: pointer;
}.node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;
}.node line{fill: #fff;stroke: steelblue;stroke-width: 1.5px;
}.link {fill: none;stroke: #ccc;stroke-width: 1.5px;
}.modal{display: none;position: fixed;z-index: 9999;top: 0;bottom: 0;left: 0;right: 0;text-align: left;
}
.modal-mask{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: black;opacity: 0.5;
}
.modal-bg{position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 9999;
}
.modal-content{display: table;position: relative;height: 100%;width: 100%;
}
.modal-cell{display: table-cell;vertical-align: middle;text-align: center;
}
.modal-cell img{max-height: 95%;
}
.modal-code{display: none;margin: 0 auto !important;
}
.modal-close{display: inline-block;position: absolute;top: 20px;right: 20px;width: 48px;height: 48px;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABYlBMVEUAAABUbnpUbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9MZG9UbnpUbnpUbnpUbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9MZG9MZG9MZG9UbnpUbnpUbnpUbnpUbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9MZG9MZG9MZG9MZG9UbnpUbnpUbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9MZG9MZG9UbnpUbnpUbnpUbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9MZG9MZG9MZG9UbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9UbnpUbnpUbnpMZG9MZG9MZG9UbnpMZG9UbnpWcHxKYm1MZG9UbnpUbnlMZG9MZG9UbnpTbHhNZXBMZG9UbnpUbnpUbnpUbnpTbHhNZXBMZG9MZG9MZG9MZG9UbnpUbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9MZG9TbHhNZXD///9kx6K7AAAAc3RSTlMAAAAAAAAAAAAAAAAAAAsGAAAAAAYLAAAAAAAao3gGAAAAAAZ4oxoAAACr//Z3BQV39v+rAAD///V3BQAABXf1//8A///1d3f1//8A/wAAAHcFBXf1e3v1//r6/3f19XcABXv6///6ewUAJoszcwAAAAFiS0dEdahqmPsAAAAHdElNRQfeDAoPOSkJx4hxAAABVUlEQVRIx2NgGAWDDDAyMbOwYgqzsXNwcmFTz83Dy8cvIIguLCQsIiomLoGpXpJHSlpGVk5eAVVYUUlZRVVNXVwDQ4Mmr7SWto6unjyKHUJK+gaGRsZqYiYYGkz5ZLTNzC0srayRdAjZ2NrZOzgaqYo6YWhg4ZfVMXd2cXWzQrhKUcnW3cPTy8FQRYQdQwOrt5yuhYuPr6sl3FVA99h5+Pl72hsoB7Bh+lpQXs/S1dfHBe4qsHs8/f087PSVhLCFq4K8lZurC9xVUPd4erjbKilijzlBaytLuKvg7rGztRFiwAGQXBUYRMA9aK4KDgkNI+AeVFeFR0RGEXIPiquiY2LjCLoH7qr4hMSk5JTUtPQMAu6B2pGZlZ2TW1ySl19QWETQfDI0kOokUj1NarCSGnGkJg1SEx+pyZvUDERyFiW5ECC5mCG5ICO5qCS5MCa9uB8FAwkA1tqHz8dmcxMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMDktMTdUMTU6MjE6MjUrMDg6MDBOsysLAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTEyLTEwVDE1OjU3OjQxKzA4OjAwNdJKeAAAAE10RVh0c29mdHdhcmUASW1hZ2VNYWdpY2sgNy4wLjEtNiBRMTYgeDg2XzY0IDIwMTYtMDktMTcgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmfd2aVOAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAAxMjhDfEGAAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADEyONCNEd0AAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTQxODE5ODI2MfKdw1kAAAAQdEVYdFRodW1iOjpTaXplADk0NEK36UZEAAAAX3RFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL3NyYy8xMTgxNy8xMTgxNzU3LnBuZ7UlySMAAAAASUVORK5CYII=");
}tspan{font-size: 14px;
}
text{dominant-baseline: middle;
}

prism.css：

code[class*="language-"],
pre[class*="language-"] {color: black;background: none;text-shadow: 0 1px white;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align: left;white-space: pre;word-spacing: normal;word-break: normal;word-wrap: normal;line-height: 1.5;-moz-tab-size: 4;-o-tab-size: 4;tab-size: 4;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;
}pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {text-shadow: none;background: #b3d4fc;
}pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {text-shadow: none;background: #b3d4fc;
}@media print {code[class*="language-"],pre[class*="language-"] {text-shadow: none;}
}/* Code blocks */
pre[class*="language-"] {padding: 1em;margin: .5em 0;overflow: auto;
}:not(pre) > code[class*="language-"],
pre[class*="language-"] {background: #f5f2f0;
}/* Inline code */
:not(pre) > code[class*="language-"] {padding: .1em;border-radius: .3em;white-space: normal;
}.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {color: slategray;
}.token.punctuation {color: #999;
}.namespace {opacity: .7;
}.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {color: #905;
}.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {color: #690;
}.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {color: #a67f59;background: hsla(0, 0%, 100%, .5);
}.token.atrule,
.token.attr-value,
.token.keyword {color: #07a;
}.token.function {color: #DD4A68;
}.token.regex,
.token.important,
.token.variable {color: #e90;
}.token.important,
.token.bold {font-weight: bold;
}
.token.italic {font-style: italic;
}.token.entity {cursor: help;
}

mind_mapping.js代码:

var engine,duration = 750;
var margin = {top: 20,right: 120,bottom: 20,left: 120},width = 960 - margin.right - margin.left,height = 800 - margin.top - margin.bottom;
d3.json('bs_introduction/bs_introduction.json', function (err, tree) {engine = d3.layout.tree().setNodeSizes(true);// sizingengine.nodeSize(function (t) {return [t.x_size, t.y_size];});// gapengine.spacing(function (a, b) {return a.parent == b.parent ?5 : engine.rootXSize();});tree.x0 = height / 2;tree.y0 = 0; function collapse(d) {if (d.children) {d._children = d.children;d._children.forEach(collapse);d.children = null;}}var $iframe_doc = document.getElementById('html_code').contentWindow.document;var $modal = d3.select('#modal'),$modal_cell = $modal.select('.modal-cell'),$modal_pre = $modal.select('.modal-code'),$modal_code = $modal_pre.select('code');$modal.on("click.mask", function(){if(d3.event.target.className !== 'modal-cell'){return false;}$modal.style('display', 'none');$modal.selectAll('img').style('display', 'none');$modal_pre.style('display', 'none')});var client_width = document.documentElement.clientWidth,client_height = document.documentElement.clientHeight;var svg = d3.select("#drawing").append('svg').attr("width", client_width).attr("height", client_height);var svg_g = svg.append("g");svg.call(d3.behavior.zoom().scaleExtent([0.5,3]).on("zoom", redraw));update(tree);tree.children.forEach(collapse);update(tree, function(){setTimeout(function(){d3.select("#drawing").style({'visibility': "visible"});d3.selectAll(".node").each(function(d, i){i > 0 && (d3.select(this).select(".vertical-line").style('display', 'block'));});},1000);});function update(source, callback){var nodes = d3.layout.hierarchy()(tree);var last_id = 0;var node = svg_g.selectAll(".node").data(nodes, function (d) {return d.id || (d.id = ++last_id);});var nodeEnter = node.enter().append("g").attr("class", "node").attr("transform", function (d) {var x_size = source.x_size ? source.x_size : 0;return "translate(" + source.y0 + "," + (source.x0 - x_size / 2) + ")";});//.on("click", click);var text_elements = nodeEnter.append("text").attr({id: function (d) {return d.id;},fill: 'black',dy: "0.35em"}).each(function(d){parseText(this, d);});engine.nodeSize(function (d) {var ele = document.getElementById(d.id),ele_size = ele.getBBox();return [ele_size["height"] + 30, ele_size["width"] + 14];});nodes = engine.nodes(tree);function node_extents(n) {return [n.x - n.x_size / 2, n.y,n.x + n.x_size / 2, n.y + n.y_size];}var root_extents = node_extents(nodes[0]);var xmin = root_extents[0],ymin = root_extents[1],xmax = root_extents[2],ymax = root_extents[3],area_sum = (xmax - xmin) * (ymax - ymin),x_size_min = nodes[0].x_size,y_size_min = nodes[0].y_size;nodes.slice(1).forEach(function (n) {var ne = node_extents(n);xmin = Math.min(xmin, ne[0]);ymin = Math.min(ymin, ne[1]);xmax = Math.max(xmax, ne[2]);ymax = Math.max(ymax, ne[3]);area_sum += (ne[2] - ne[0]) * (ne[3] - ne[1]);x_size_min = Math.min(x_size_min, n.x_size);y_size_min = Math.min(y_size_min, n.y_size);});var scale = 1;function svg_x(node_y) {return (node_y - ymin) * scale;}function svg_y(node_x) {return (node_x - xmin) * scale;}var nodebox_right_margin = Math.min(x_size_min * scale, 10),nodebox_vertical_margin = Math.min(y_size_min * scale, 3);function rand() {return 80 + Math.floor(Math.random() * 100);}var filler = function () {return "fill-opacity: 0; stroke:rgb(" + rand() + "," + rand() + "," + rand() + ")"};node.transition().duration(duration).attr("transform", function (d) {if(d.parent && d.parent.y0 && d.parent.y_size){d.y = d.parent.y0 + d.parent.y_size + 100;} else {d.y = d.depth * 180;}return "translate(" + svg_x(d.y) + "," + (svg_y(d.x)-(d.x_size * scale - nodebox_vertical_margin) / 2) + ")";});nodeEnter.append("rect").attr({x: 0,rx: 6,ry: 6,width: function (d) {return d.y_size * scale - nodebox_right_margin;},height: function (d) {return d.x_size * scale - nodebox_vertical_margin;},style: function(d){return d.filler = filler();}}).attr('next', function(d){if(d.children || d._children){var $g = d3.select(this.parentNode).append('g').attr({transform: 'translate(' + (d.y_size - 6) +  ',' + (d.x_size/2 - 5) + ')'}).on("click", click);$g.append('circle').attr({r: '7',cx: 3.5,cy: 3.5,style: 'stroke:' + d.filler});$g.append('line').attr({x1: 0,y1: 3.5,x2: 7,y2: 3.5,style: 'stroke:' + d.filler});var $vertical_line =  $g.append('line').attr({x1: 3.5,y1: 0,x2: 3.5,y2: 7,style: 'stroke:' + d.filler}).classed('vertical-line', true);if(d._children){$vertical_line.style('display', 'block');} else {$vertical_line.style('display', 'none');}return true}return false});node.exit().transition().duration(duration).attr("transform", function (d) {return "translate(" + (source.y) + "," + (svg_y(source.x)-(source.x_size * scale - nodebox_vertical_margin)/2) + ")";}).remove();var diagonal = d3.svg.diagonal().source(function (d, i) {var s = d.source;return {x: s.x,y: s.y + s.y_size - nodebox_right_margin / scale};}).projection(function (d) {return [svg_x(d.y), svg_y(d.x)];});var enter_diagonal = d3.svg.diagonal().source(function (d, i) {var s = d.source;return {x: s.x,y: s.y + s.y_size - nodebox_right_margin / scale};}).projection(function (d) {return [d.y, d.x];});var links = engine.links(nodes);var link = svg_g.selectAll("path.link").data(links, function (d) {return d.target.id;});link.enter().insert("path", "g").attr("class", "link").attr("d", function (d) {var o = {x: source.x0,y: source.y0,y_size: source.y_size};return enter_diagonal({source: o,target: o});});link.transition().duration(duration).attr("d", diagonal);link.exit().transition().duration(duration).attr("d", function (d) {var o = {x: source.x,y: source.y,y_size: source.y_size};return diagonal({source: o,target: o});}).remove();nodes.forEach(function (d) {d.x0 = svg_y(d.x);d.y0 = svg_x(d.y);});callback && callback();}function redraw() {svg_g.attr("transform","translate(" + d3.event.translate + ")"+ " scale(" + d3.event.scale + ")");}function click(d) {if (d.children) {d3.select(this).select('.vertical-line').style('display', 'block');d._children = d.children;d.children = null;} else {d3.select(this).select('.vertical-line').style('display', 'none');d.children = d._children;d._children = null;}update(d);}function parseText(text_tag, d){var $text = d3.select(text_tag),content = d.content;if(typeof content === 'string'){if(/^(\.\/)?img\//.test(content)){var img_id = content.replace(/[\/\.]/g, '');if($modal_cell.select('#' + img_id)[0][0] === null){$modal_cell.append('img').attr('id', img_id).attr('src', content).attr('style', 'display:none');}$text.append('tspan').attr({x: '2', dy: '1.5em', path: content}).text('点击查看图片');d3.select(text_tag.parentNode).attr('img_id', img_id).on("click.show", function(){$modal.select('#' + d3.select(this).attr('img_id')).attr("style", "display:inline-block");$modal.attr("style", "display: block");});} else {var len = 0, split_str = '', reg = /[^\x00-\xff]/;var split_arr = content.split(''),split_arr_len = split_arr.length - 1;split_arr.forEach(function(val, i){if(reg.test(val)){len += 2;} else {len += 1;}split_str += val;if(len >= 30 || i >= split_arr_len){$text.append('tspan').attr({x: '2', dy: '1.5em'}).text(split_str);len = 0;split_str = '';}});}} else {if(content.type === 'html_code'){$modal_code.attr('class', 'language-html');} else if(content.type === 'js_code'){$modal_code.attr('class', 'language-javascript');}$text.append('tspan').attr({x: '2', dy: '1.5em'}).text('点击查看代码');d3.select(text_tag.parentNode).attr('code_id', content.id).on("click.show", function(){var code = $iframe_doc.getElementById(d3.select(this).attr('code_id')).innerHTML;$modal_code.text(code);$modal_pre.style('display', 'inline-block');Prism.highlightAll();$modal.style('display', 'block');});}}
});

bs_introduction.json

{
"content":"如何学习黑客",
"children":
[{ "content":"预备知识" , "children":[{"content":"HTML & CSS" },{"content":"JavaScript" },{"content":"Linux" },{"content":"SQL" }] },{ "content":"安装" , "children":[{"content":"记事本软件","children":[{"content":"VIM"},{"content":"EditPlus"},{"content":"Sublime Text"}]},{"content":"服务器软件","children":[{"content":"Apache Http Server"},{"content":"Tomcat"},{"content":"IIS"}]},{"content":"下载NMAP"},{"content":"下载WIRESHARK"}] },{ "content":"入门","children":[{"content":"入侵","children":[{"content":"select"},{"content":"selectAll"}]},{"content":"sql注入","children":[{"content":"shell"},{"content":"data"}]},{"content":"跨站脚本"},{"content":"简单图形","children":[{"content":"柱形图"},{"content":"折线图"},{"content":"散点图"}]},{"content":"比例尺"},{"content":"生成器"},{"content":"过渡"}] },{ "content":"进阶" , "children":[{"content":"社会工程学的应用","children":[{"content":"饼状图"},{"content":"树状图"},{"content":"矩阵树图"}]},{"content":"缓冲区溢出攻击"}]}
]
}

运行结果如图:

代码下载链接

web实现html页面思维导图效果相关推荐

web前端学习路线思维导图
分享一张web前端思维导图,先收藏图太大不好展示,看不清楚可以进入以下链接查看--web前端学习路线思维导图在线版
类似echarts图的思维导图效果,用js实现xmind思维导图的效果===使用jsMind来实现
首先:我先先来看看实现的效果: 然后我再说说具体实现的步骤吧:(别急文件后面我会把百度网盘链接发出来的,除了小案例外还有jsMind的文件,案例,目前的说明文档) 第一:引入jsMind的css.js ...
Web兼容性测试（思维导图）
web兼容性测试真实测试思路(思维导图) web兼容性测试-操作系统 web兼容性测试-浏览器 web兼容性测试-分辨率 web兼容性测试-组合测试场景|兼容性测试工具|网速思维导图原件下载地址:h ...
Web安全学习思维导图，[web入门菜鸡萌新必备]
写在前面,自制了一个web安全学习的思维导图,写的并不是很全面,自己本身其实也是个弟弟, 总结了一些师傅们的资源,希望大家给予一定的建议和提升的空间,另外也给萌新一个思路吧~ 下面是大纲,可以参考内容 ...
一文了解常用思维导图与画图软件
文章目录前言 XMind(思维导图)(十分推荐) 特点图例 GitMind(流程图+思维导图)(八分推荐) MindMaster(思维导图)(八分推荐) ProcessOn(流程图)(八分推荐) ...
思维导图是什么？如何制作学习思维导图
思维导图又叫心智图,在我们的日常生活中运用的十分广泛,它就像我们的大脑地图,能够让我们在一张图上就可以掌握资讯的全貌,是一个思维工具和思维方法: 在我们的日常学习中,常常会有人问到"为什么有 ...
xcode 可以打开xmind_原来xmind还有一款如此漂亮的思维导图工具
xmind的核心思维导图通常是按序号来进行的命名的,比如Xmind 8 pro .其实在xmind下还有一款一款主打简洁美观的思维导图产品:Xmind zen.如果说xmind pro做到了功能全面强 ...
原来xmind还有一款如此漂亮的思维导图工具
xmind的核心思维导图通常是按序号来进行的命名的,比如Xmind 8 pro .其实在xmind下还有一款一款主打简洁美观的思维导图产品:Xmind zen.如果说xmind pro做到了功能全面强 ...
html将页面分成三块_导航渲染流程你真的知道从输入URL到页面展示发生了什么吗？（内附思维导图）...
导航渲染流程通过这篇文章当你被问到从URL输入到页面展示都发生了什么的时候,基本都能对答如流,甚至可以一直深入的说,说到面试官闭麦哈哈哈~ 以下是本文的思维导图,直接拿图「点个赞」再走吧 ~ 求求了 ...

web实现html页面思维导图效果

index.html内容:

CSS文件夹

common.css:

prism.css：

mind_mapping.js代码:

bs_introduction.json

运行结果如图:

web实现html页面思维导图效果相关推荐

最新文章

热门文章