d3.js学习笔记-10

1 树状图

在区域内按规则布置节点，再用连线将节点连接起来，最终的图表形似一颗树杆

d3.layout.tree()：创建一个树状图布局
tree.size([width, height])：设定或获取尺寸，参数size是只有两个元素的数组，分别表示宽和高。
tree.nodeSize([nodeSize])：设定或获取各节点的大小，以数组的形式:[x,y]
tree.value([value])：设定或获取值访问器，默认为null。如果使用了此函数，各节点会多一个value属性。
tree.children([children])：设定或获取子节点访问器。默认情况下，认为当前节点的变量children是子节点。
tree.sort([comparator])：设定或获取排序的比较器。
tree.separation([separation])：设定或获取相邻节点之间的间隔。
tree.nodes(root)：根据root进行计算，获取节点数组，节点包含的属性有：parent(父节点)、children(子节点)、depth(深度)、x(x坐标)、 y(y坐标)。
tree.links(nodes)：根据nodes进行计算，获取连线数组，连线包含的属性有：source(源节点)、target(目的节点)。

example
首先创建一个json文件，名称为city.json，将文件放置在项目文件下（任何一个位置都可以，只需要路径写正确就可以），内容如下：

{"name": "中国","children": [{"name": "浙江","children": [{"name": "杭州"},{"name": "宁波"},{"name": "温州"},{"name": "绍兴"}]},{"name": "广西","children": [{"name": "桂林","children": [{"name": "秀峰区"},{"name": "叠彩区"},{"name": "象山区"},{"name": "七星区"}]},{"name": "南宁"},{"name": "柳州"},{"name": "防城港"}]},{"name": "黑龙江","children": [{"name": "哈尔滨"},{"name": "齐齐哈尔"},{"name": "牡丹江"},{"name": "大庆"}]},{"name": "新疆","children": [{"name": "乌鲁木齐"},{"name": "克拉玛依"},{"name": "吐鲁番"},{"name": "哈密"}]}]
}

再创建一个html文件，添加以下内容

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title></title><script src="../d3.v3.min.js"></script>
</head>
<style>.node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;}.node {font: 12px sans-serif;}.link {fill: none;stroke: #ccc;stroke-width: 1.5px;}
</style><body><script>var width = 600;var height = 600;// 创建一个画布var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);// 创建一个g元素，用于树状图var gTree = svg.append("g").attr("transform", "translate(40,0)");// 创建一个树状图布局var tree = d3.layout.tree().size([width, height - 200])  // 设置尺寸.separation(function (a, b) { return (a.parent == b.parent ? 1 : 2); });  // 定义相邻节点的间隔，参数为函数// 对角线生成器// projection作用于每一个节点也就是说其x坐标和y坐标将被对调// 这样就能制成一个横向的树状图var diagonal = d3.svg.diagonal().projection(function (d) { return [d.y, d.x]; });// 读取json文件中的数据：d3.json()d3.json("city.json", function (error, root) {var nodes = tree.nodes(root); //根据root进行计算，得到节点数组var links = tree.links(nodes);//根据nodes进行计算，得到连线数组console.log(nodes);console.log(links);// 添加连线var link = gTree.selectAll(".link").data(links)  // 绑定数据.enter().append("path").attr("class", "link").attr("d", diagonal);   //连线使用对角线生成器，将x y对调// 添加节点var node = gTree.selectAll(".node").data(nodes)  //绑定数据.enter().append("g")  // 将每一个系欸但放到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; });});</script>
</body></html>

如果运行过程中，chrome浏览器报出跨域问题，可以试试这个方法

2 集群图

类似于树状图，布局中方法的意义和用法与树状图相同，唯一的不同在于：所有叶子节点都被放置在相同的深度

2.1 simple example

将上述树状图中的d3.layout.tree修改为d3.layout.cluster，得到的结果如下：

2.2 example：圆形集群图

{"name":"中国","children":[{ "name":"浙江" , "children":[{"name":"杭州" },{"name":"宁波" },{"name":"温州" },{"name":"绍兴" }] },{ "name":"广西" , "children":[{"name":"桂林","children":[{"name":"秀峰区"},{"name":"叠彩区"},{"name":"象山区"},{"name":"七星区"}]},{"name":"南宁"},{"name":"柳州"},{"name":"防城港"}] },{ "name":"黑龙江","children":[{"name":"哈尔滨"},{"name":"齐齐哈尔"},{"name":"牡丹江"},{"name":"大庆"}] },{ "name":"新疆" , "children":[{"name":"乌鲁木齐"},{"name":"克拉玛依"},{"name":"吐鲁番"},{"name":"哈密"}]},{ "name":"西藏" , "children":[{"name":"呼和浩特"},{"name":"包头"},{"name":"乌海"},{"name":"赤峰"}]},{ "name":"北京" , "children":[{"name":"东城区"},{"name":"西城区"},{"name":"海淀区"},{"name":"朝阳区"},{"name":"丰台区"},{"name":"通州区"}]},{ "name":"上海" , "children":[{"name":"黄埔区"},{"name":"浦东新去"},{"name":"徐汇区"},{"name":"长宁区"},{"name":"静安区"},{"name":"通州区"}]},{ "name":"四川" , "children":[{"name":"成都"},{"name":"绵阳"},{"name":"自贡"},{"name":"攀枝花"},{"name":"泸州"},{"name":"德阳"}]},{ "name":"广东" , "children":[{"name":"广州"},{"name":"深圳","children":[{"name":"福田区"},{"name":"罗湖区"},{"name":"南山区"},{"name":"盐田区"},{"name":"宝安区"},{"name":"龙岗区"}]},{"name":"珠海"},{"name":"汕头"},{"name":"佛山"}]}]}

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title></title><script src="../d3.v3.min.js"></script>
</head>
<style>.node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;}.node {font: 12px sans-serif;}.link {fill: none;stroke: #ccc;stroke-width: 1.5px;}
</style><body><script>// 1. 创建画布// 2. 创建用于单个图形的g元素// 3. 创建布局，设置大小/间隔// 4. 读取数据// 5. 添加节点 添加连线：绑定数据 设置位置角度// 6. 为节点添加圆形// 7. 为节点添加文字var width = 600;var height = 600;// 创建一个画布var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);// 创建一个g元素，用于集群图var gCluster = svg.append("g")// 将图形移至中心.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");// 创建一个树状图布局var cluster = d3.layout.cluster()// 360表示360°范围内，角度为顺时针方向， 第二个参数表示半径.size([360, height / 2 - 100]).separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });  // 定义相邻节点的间隔，参数为函数// 对角线生成器// projection作用于每一个节点也就是说其x坐标和y坐标将被对调// 这样就能制成一个横向的树状图var diagonal = d3.svg.diagonal.radial().projection(function (d) {var radius = d.y,  // 半径angle = d.x / 180 * Math.PI;  //角度return [radius, angle];});// 读取json文件中的数据：d3.json()d3.json("city2.json", function (error, root) {var nodes = cluster.nodes(root); //根据root进行计算，得到节点数组var links = cluster.links(nodes);//根据nodes进行计算，得到连线数组console.log(nodes);console.log(links);// 添加连线var link = gCluster.selectAll(".link").data(links)  // 绑定数据.enter().append("path").attr("class", "link").attr("d", diagonal); //连线使用对角线生成器，将x y对调// 添加节点var node = gCluster.selectAll(".node").data(nodes)  //绑定数据.enter().append("g")  // 将每一个系欸但放到g元素中.attr("class", "node").attr("transform", function (d) {// rorate是以x正方向为旋转起点，布局是以y轴负方向为旋转起点，两者相差90°return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";})// 节点添加圆形node.append("circle").attr("r", 4.5);// 节点添加文本node.append("text").attr("transform", function (d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }).attr("dy", ".3em").style("text-anchor", function (d) { return d.x < 180 ? "start" : "end"; }).text(function (d) { return d.name; });});</script>
</body></html>

3 捆图

捆图需要与其他层级布局一起使用，采用嵌套结构，最常见的是和集群图一起使用，集群图计算节点位置，捆图计算连线的路径。

d3.layout.bundle()：创建一个捆图布局
bundle(links)：根据数组links的source和target计算路径

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><script src="../d3.v3.min.js"></script>
</head>
<style>.node circle {stroke: black;stroke-width: 2px;}.node text {font-size: 12px;font-family: simsun;}.link {fill: none;stroke: black;stroke-opacity: .5;stroke-width: 8px;}
</style><body><script>var width = 600;var height = 600;var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);//1. 确定初始数据// nodesvar cities = {name: "",children: [{ name: "北京" }, { name: "上海" }, { name: "杭州" },{ name: "广州" }, { name: "桂林" }, { name: "昆明" },{ name: "成都" }, { name: "西安" }, { name: "太原" }]};// linksvar railway = [{ source: "北京", target: "上海" },{ source: "北京", target: "广州" },{ source: "北京", target: "杭州" },{ source: "北京", target: "西安" },{ source: "北京", target: "成都" },{ source: "北京", target: "太原" },{ source: "北京", target: "桂林" },{ source: "北京", target: "昆明" },{ source: "北京", target: "成都" },{ source: "上海", target: "杭州" },{ source: "昆明", target: "成都" },{ source: "西安", target: "太原" }];//2. 转换数据// 创建集群图布局var cluster = d3.layout.cluster().size([360, width / 2 - 50]).separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });// 创建捆图布局var bundle = d3.layout.bundle();// 计算节点var nodes = cluster.nodes(cities);console.log("nodes：")console.log(nodes)// 将连线两端的名称换成节点对象var oLinks = map(nodes, railway);console.log("oLinks：")console.log(oLinks)// 调用捆图布局，转换数据var links = bundle(oLinks);console.log("links：")console.log(links)//将links中的source和target的城市名称替换成节点对象function map(nodes, links) {var hash = [];for (var i = 0; i < nodes.length; i++) {// 将名称与节点对象对应hash[nodes[i].name] = nodes[i];}var resultLinks = [];for (var i = 0; i < links.length; i++) {resultLinks.push({source: hash[links[i].source],target: hash[links[i].target]});}return resultLinks;}//3. 绘图var line = d3.svg.line.radial()  // 放射式线段生成器.interpolate("bundle") // 插值，适用于捆图.tension(.85).radius(function (d) { return d.y; }).angle(function (d) { return d.x / 180 * Math.PI; });gBundle = svg.append("g").attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");var color = d3.scale.category20c();// 添加连下路径var link = gBundle.selectAll(".link").data(links).enter().append("path").attr("class", "link").attr("d", line);   //使用线段生成器// 添加节点var node = gBundle.selectAll(".node").data(nodes.filter(function (d) { return !d.children; }))  // 只绑定没有子节点的节点.enter().append("g").attr("class", "node").attr("transform", function (d) {return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + "rotate(" + (90 - d.x) + ")";});node.append("circle").attr("r", 20).style("fill", function (d, i) { return color(i); });node.append("text").attr("dy", ".2em").style("text-anchor", "middle").text(function (d) { return d.name; });</script>
</body></html>

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶206-244.

d3.js学习笔记-10(布局：树状图、集群图捆、捆图)相关推荐

python画聚类树状图_影像组学学习笔记(36)-聚类树状图Dendrogram的python实现
本笔记来源于B站Up主: 有Li 的影像组学系列教学视频本节(36)主要介绍: 聚类树状图Dendrogram的python实现应该注意一下scipy版本的问题:scipy 1.5.0版本画聚类树 ...
d3.js（v5.7）树状图
一.新建画布二.数据处理三.绘制连接线图示: 四.绘制节点.文字图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...
第一篇博客赶鸭子上架的d3.js学习笔记（bilibili从零开始画图表学习笔记感谢万能的b站以及up睿小狼d）
svg: 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图片格式.他由万维网联盟制定,是一个开放标准.(源代码类似于html) 一个简单的代码 <svg ...
SpringCloud学习笔记（一）【Euraka集群搭建】
来自[狂神说]Java学习完整路线https://www.bilibili.com/read/cv5702420 SpringCloud概述---Rest学习搭建---Eureka集群 SpringC ...
学习笔记Spark（二）—— Spark集群的安装配置
一.我的软件环境二.Spark集群拓扑 2.1.集群规模 192.168.128.10 master 1.5G ~2G内存.20G硬盘.NAT.1~2核 : 192.168.128.11 node1 ...
学习笔记Hadoop（八）—— Hadoop集群的安装与部署（5）—— Hadoop配置参数介绍、Hadoop集群启动与监控
五.Hadoop配置参数介绍 Hadoop集群配置文件主要有: 它们的默认参数配置可以看: core-default.xml :https://hadoop.apache.org/docs/stabl ...
学习笔记Hadoop（五）—— Hadoop集群的安装与部署（2）—— Hadoop集群部署模式、配置固定IP
一.Hadoop集群部署模式 Hadoop的安装部署的模式一共有三种: 独立模式(本地模式) standalone 默认的模式,无需运行任何守护进程(daemon),所有程序都在单个JVM上执行.由于 ...
Spark基础学习笔记07：搭建Spark HA集群
文章目录零.本讲学习目标一.Spark HA集群概述二.Spark HA集群架构三.集群角色分配表四.Spark HA集群搭建步骤 (一)安装配置ZooKeeper 1.在虚拟机master ...
Spark基础学习笔记05：搭建Spark Standalone集群
文章目录零.本讲学习目标一.Spark Standalone架构 (一)client提交方式 (二)cluster提交方式二.Spark集群拓扑 (一)集群拓扑 (二)集群角色分配三.搭建三节 ...
Auto.js学习笔记10：实例化自定义对象，在子线程使用JSON.stringify()方法导致报错（已解决）
申明本人使用的autojs是4.1.1版本 JSON.stringify()使用导致autojs软件直接奔溃退出. 报错核心局部代码 var sendInfoObj = { //对象areaCode ...

d3.js学习笔记-10(布局：树状图、集群图捆、捆图)