svg 树状图_树状图(关系图)
树状图(竖着)
d3.json("city.json", function (err, data) {
const width = 700, height = 800, padding = {top: 60, left: 30};
const svg = d3.select("body").append("svg")
.attr("width", width + padding.left * 2)
.attr("height", height + padding.top * 2).append("g")
.attr("transform", "translate(40,50)");
const tree = d3.layout.tree()
.size([width, height - 200])
.separation(function (a, b) {
//点与点之间的间隔比例
return a.parent === b.parent ? 1: 2;
});
// nodes:
// [{name: "中国",
// children: Array(3),
// depth: 0,
// x: 350,
// y: 0}
// ,...]
const nodes = tree.nodes(data);
// links:
// [
// {source:node,
// target:node}
// ,...]
const color = d3.scale.category20();
const links = tree.links(nodes);
const diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x, d.y]
});
const link = svg.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal)
.attr("fill", "none")
.attr("stroke", "purple")
.attr("stroke-width", 2);
const node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("circle")
.attr("r", 4.5)
.attr("fill",function (d,i) {
return color(i);
});
node.append("text")
.attr("dy", function (d) {
return d.children ? -14 : 20;
})
.style("text-anchor","middle")
.text(function (d) {
return d.name;
})
})
结果:
竖着
横着
d3.json("city.json", function (err, data) {
const width = 700, height = 600, padding = {top: 60, left: 30};
const svg = d3.select("body").append("svg")
.attr("width", width + padding.left * 2)
.attr("height", height + padding.top * 2).append("g")
.attr("transform", "translate(100,0)");
const tree = d3.layout.tree()
.size([width, height - 200])
.separation(function (a, b) {
console.log(a);
console.log(b);
return a.parent === b.parent ? 1 : 2;
});
// nodes:
// [{name: "中国",
// children: Array(3),
// depth: 0,
// x: 350,
// y: 0}
// ,...]
const nodes = tree.nodes(data);
// links:
// [
// {source:node,
// target:node}
// ,...]
const links = tree.links(nodes);
const diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x]
});
const link = svg.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal)
.attr("fill", "none")
.attr("stroke", "purple")
.attr("stroke-width", 2);
const node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", function (d) {
return d.children ? -8 : 8;
})
.attr("dy", 3)
.style("text-anchor", function (d) {
return d.children ? "end" : "start"
})
.text(function (d) {
return d.name;
})
})
结果:
横着
svg 树状图_树状图(关系图)相关推荐
- mysql的关系图_学会sql数据库关系图
很久以前就知道微软的Petshop的很经典,昨天抽出时间去学习,一开始还真的不适应,什么成员资格,还真的看不太懂,运行petshop想从登陆学起,但是用户名和密码都不知道,后来发现有更注册的页面,自己 ...
- E-R图 实体,属性,关系图
E-R图 实体,属性,关系图 在ER图中有如下四个成分: 矩形框:表示实体,在框中记入实体名. 菱形框:表示联系,在框中记入联系名. 椭圆形框:表示实体或联系的属性,将属性名记入框中.对于主属性名,则 ...
- java 鱼刺图_使用java实现鱼刺图
刚毕业了,这是毕业设计的java web项目中的一个功能,使用鱼刺图进行辅助管理,在做的过程中,没有找到国内有公开的研究资料,不管是哪一种语言,所以就自己做了一个java的鱼刺图生成插件,虽然毕业设计 ...
- 上证指数30年k线图_上证指数历史k线图_k线图24种经典图解
上证指数季度k线图 400x296 - 90KB - JPEG 戴若顾比:上证指数寻找新的支撑_股市及时雨 550x341 - 25KB - JPEG 上证综指周K线图 300x232 - 16KB ...
- 关于主机的思维导图_读《思维导图》系列丛书----我用思维导图做什么?
多图预警! 作者简介:深圳一所公立高中的生物老师,日常是备备课,读读书,打打球,吹吹牛. 我将从以下几个方面介绍我是如何使用思维导图的. 图1:介绍我如何使用思维导图的思维导图 1.我平时用思维导图来 ...
- 关于主机的思维导图_关于开展思维导图培训的通知
关于开展思维导图培训的通知 思维导图(Mind map)是一种有效使用大脑的发散性思考方法,它即是工具和方法.也是一种思维模式,目前全世界有3.5亿人在学习和使用思维导图,被广泛应用在商业.教育.科学 ...
- python画美图_学会这些Python美图技巧,就等着女朋友夸你吧
一.前言 Python中有许多用于图像处理的库,像是Pillow,或者是OpenCV.而很多时候感觉学完了这些图像处理模块没有什么用,其实只是你不知道怎么用罢了.今天就给大家带了一些美图技巧,让你的图 ...
- 上偏续关系哈斯图_上的偏序关系哈斯图如下.PPT
上的偏序关系哈斯图如下 3. 证明R在A上反对称 任取, ?R??R ? --------.. ? x = y 前提 推理过程 结论 4. 证明R在A上传递 任取,, ?R??R ? -------- ...
- ggplot2组合图_组合多个ggplot2图以用于科学出版物
ggplot2组合图 The ggplot2 is one of the popular plotting libraries that one could leverage to get beaut ...
- python高级编程第3版导图_流弊!一张图完美解释 Python 3 全部用法
最近Github热榜中一个Python项目非常抢眼<Python 3 in one pic>. 考虑到有部分同学访问GitHub速度过慢,我特意下载下来,有需要的下方链接自取.GitHub ...
最新文章
- 美国女生给我的六个惊诧
- 【计算机网络】Session机制
- KDD 2020 开源论文 | 稀疏优化的块分解算法
- 转hdmi_苹果本轻松接大屏,毕亚兹雷电接口转HDMI/VGA转换器评测
- Android中FTP服务器、客户端搭建以及SwiFTP、ftp4j介绍
- C语言线性表之单链表
- mysql_connect报告”No such file or directory”错误的解决方法
- unity中静态变量的使用
- mssql数据库基本语句总结(2)
- 很实用的一个ext表格,具有很好的分页功能。
- Hive 基础及安装
- GoDaddy Linux主机支持机房的更换
- linux分布式文件部署,Linux的企业-分布式文件系统mfs(moosefs)搭建与配置
- 标准软件开发过程 文档
- 极小极大搜索方法、负值最大算法和Alpha-Beta搜索方法
- 缓慢的HTTP拒绝服务攻击漏洞
- 函数凹凸性证明中点函数值和函数值中点的关系
- 量子计算机能为我们做什么,为实现量子计算,我们还需要做些什么
- 《Cinema 4D + After Effects动态图形设计案例解析》——1.2 动态图形的历史和发展...
- CHIL-SQL-AVG 函数