html树图制作,d3.js制作树结构图
一、运行效果
说明:使用鼠标滚轮放大缩小,点解节点可以收缩打开子节点,按住鼠标左键拖动可移动整体图形。
二、实现过程
1、编写html和css结构
.node {
ursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.tree{
width: 800px;
height: 800px;
margin: 0 auto;
background: #E0E0E0;
}
.tree svg{
width: 100%;
height: 100%;
}
2、创建tree布局var margin = [20, 120, 20, 120],
width = document.getElementById("tree").offsetWidth,
height = document.getElementById("tree").offsetHeight;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree() //创建d3树布局,并定义画布大小
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件
var svg = d3.select("body").select("#tree").append("svg")
.call(zoom)//给svg绑定zoom事件
.append("g")
.attr("transform", "translate(" + margin[3] + "," + margin[0] + ")")
.call(zoom)//给g绑定zoom事件
.append("g");
function zoomed() { //根据操作更改svg的大小位置
svg.attr("transform",
"translate(" + zoom.translate() + ")" +
"scale(" + zoom.scale() + ")"
);
}
3、在书布局中创建tree的每个节点,并绑定点击收缩展开子节点事件root = json[0];
root.x0 = height / 2;
root.y0 = 0;
root.children.forEach(collapse);
update(root); //根据数据,创建节点以及连线
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
function update(source) {
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 180; });
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
var link = svg.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};
return 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};
return diagonal({source: o, target: o});
})
.remove();
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
注意,其中的json数据格式为:var json = [
{
"name": "张三",
"parent": "null",
"children": [
{
"name": "李四",
"parent": "张三",
"children": [
{
"name": "王五",
"parent": "李四",
"children": [
{"name": "程六","parent": "王五" },
{"name": "王八","parent": "王五" },
{"name": "王七","parent": "王五" },
{
"name": "王九",
"parent": "王五",
"children":[
{"name": "王十","parent": "王五" },
{"name": "王十一","parent": "王五" },
{"name": "王十二","parent": "王五" },
{"name": "王十三","parent": "王五" },
{"name": "王十四","parent": "王五" },
{
"name": "程五",
"parent": "王五",
"children":[
{"name": "程六","parent": "程五" },
{"name": "程七","parent": "程五" },
{"name": "程八","parent": "程五" },
{"name": "小张","parent": "小红" },
{"name": "小王","parent": "小红" },
{"name": "小程","parent": "小红" },
{"name": "小陈","parent": "小红" },
{"name": "小明","parent": "小红" },
{"name": "小张","parent": "小红" }
]
}
]
}
]
},
{
"name": "马一",
"parent": "李四",
"children":[
{"name": "马二","parent": "马一" },
{"name": "马三","parent": "马一" },
{"name": "马四","parent": "马一" },
{"name": "马五","parent": "马一" },
{"name": "马六","parent": "马一" },
{"name": "马七","parent": "马一" },
{"name": "小明","parent": "小红" },
{"name": "小张","parent": "小红" }
]
}
]
},
{
"name": "小红",
"parent": "张三",
"children":[
{"name": "小明","parent": "小红" },
{"name": "小张","parent": "小红" },
{"name": "小王","parent": "小红" },
{"name": "小程","parent": "小红" },
{"name": "小陈","parent": "小红" },
{"name": "小明","parent": "小红" },
{"name": "小张","parent": "小红" }
]
}
]
}
];
三、项目结构图
四、补充说明
这里使用的是v3版本的d3.js,每个版本的d3.js都有些许不同,引入库时需要注意这点。
html树图制作,d3.js制作树结构图相关推荐
- D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
- d3.js 制作简单的贪吃蛇
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...
- d3.js 制作简单的俄罗斯方块
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- HTML制作年历,js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己 ...
- 如何使用 D3.js 制作六边环形图
本文适合对 D3 API 稍有熟悉的人阅读,如果你是的话,继续看下去吧~ 附 D3API 文档地址 对设计图的思考 先看我们要实现的设计图: 这个环形图适合多个共同展示, 高亮的环形表达的意义是,当前 ...
- PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...
- d3.js-V3制作简单的飞线图
d3.js制作简单的飞线图 简介 期末的一个小作业,放上来分享一下.若有不懂的地方欢迎在评论区提问~ 最终效果图: 使用工具 d3.js (V3版本) 步骤简介 准备好数据. 绘制一个中国地图. 绘制 ...
- D3.js可视化库入门视频教程
2019独角兽企业重金招聘Python工程师标准>>> D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Documen ...
最新文章
- CVPR2021最佳论文:当GAN遇到3D场景,无需监督就学会“动态抠图”、360度展示对象...
- 二分图的匹配问题以及求解算法
- Apache Thrift - java开发详解
- JavaEE5种常见的设计模式
- 【转】3D图形引擎(DX9): FX
- tp5中mysql使用REGEXP 正则匹配
- 直观理解神经网络和梯度下降
- 分享一篇关于陌生人社交的竞品分析报告
- mysql权限怎么修改_mysql修改权限
- 手机远程连接服务器工具:RD client远程桌面使用教程
- 【重要通知】结构设计新班开课——本轮主讲电动牙刷产品结构设计
- 记录delphi 海康摄像机登陆
- windows上双开微信代码
- 快速解决win7系统Aero主题无法使用
- 数据库事务的四大特性和隔离级别,一文带你看通透
- 【OpenCV】- 分水岭算法
- 超简单的vim配置高亮
- Python科学计算的瑞士军刀——Anaconda 安装与配置
- zen cart产品分类及产品管理
- 烧录软件BlueSuite.WIN.3.3 Installer_3.3.14.1471
热门文章
- 【算法大赛直播周】大赛评委分享广告技术干货,精彩不容错过!
- 太赞了!智能语音技术年终报告:谢磊教授、王赟博士、罗艺博士…
- 深度学习基础 | RNN家族全面解析
- Python正则表达式总结
- python期望输出隐藏_【归纳综述】马尔可夫、隐马尔可夫 HMM 、条件随机场 CRF 全解析及其python实现...
- caffe安装_【开源框架】caffe图像分类从模型自定义到测试
- lstm网络一般训练多少轮_做网络推广一般多少钱:做网络推广 你一定会用到这个产品...
- 东南亚本地商ERP仓储系统怎么样?
- 控制工程基础Chapter2 Mathematical models of systems
- Linux联网配置-IP 网关 DNS