【 D3.js 进阶系列 — 3.0 】 分区图
2014-11-23 18:58
1011 查看
分区图( Partition ),也是 D3 的一个布局( Layout )。这个布局很有意思,可以做成方形也可能做成圆形,本文先介绍方形分区图的***方法,这也是分区图最基本的形式。
分区图也是用于表示包含与被包含关系的。
第 2 行:sort 设定内部的顶点的排序函数,null 表示不排序。
第 3 行:size 设定转换后图形的范围,这个值很重要,运用得当可变为圆形分区图。
第 4 行:value 设定表示分区大小的值。这里的意思是:如果数据文件中用 size 值表示结点大小,那么这里可写成 return d.size。
接下来读取并转换数据,代码如下:
顶点中增加了几个变量,其中:
x: 顶点的 x 坐标位置
y: 顶点的 y 坐标位置
dx: 顶点的宽度 dx
dy: 顶点的高度 dy
http://www.ourd3js.com/demo/J-3.0/rect_partition.html
发表日期:2014 年 11 月 23 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
分区图也是用于表示包含与被包含关系的。
1. 数据
本文使用【入门 - 第 9.4 章】的数据,内容为中国境内几个城市的所属关系。2. 布局(数据转换)
var partition = d3.layout.partition() .sort(null) .size([width,height]) .value(function(d) { return 1; });第 1 行:分区图的布局。
第 2 行:sort 设定内部的顶点的排序函数,null 表示不排序。
第 3 行:size 设定转换后图形的范围,这个值很重要,运用得当可变为圆形分区图。
第 4 行:value 设定表示分区大小的值。这里的意思是:如果数据文件中用 size 值表示结点大小,那么这里可写成 return d.size。
接下来读取并转换数据,代码如下:
d3.json("city_tree.json", function(error, root) { if(error) console.log(error); console.log(root); //转换数据 var nodes = partition.nodes(root); var links = partition.nodes(nodes); //输出转换后的顶点 console.log(nodes); }来看看转换后的数据为何:
顶点中增加了几个变量,其中:
x: 顶点的 x 坐标位置
y: 顶点的 y 坐标位置
dx: 顶点的宽度 dx
dy: 顶点的高度 dy
3. 绘制
绑定顶点数据,分别绘制矩形和文字,代码如下:var rects = svg.selectAll("g") .data(nodes) .enter().append("g"); rects.append("rect") .attr("x", function(d) { return d.x; }) // 顶点的 x 坐标 .attr("y", function(d) { return d.y; }) // 顶点的 y 坐标 .attr("width", function(d) { return d.dx; }) // 顶点的宽度 dx .attr("height", function(d) { return d.dy; }) //顶点的高度 dy .style("stroke", "#fff") .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) .on("mouseover",function(d){ d3.select(this) .style("fill","yellow"); }) .on("mouseout",function(d){ d3.select(this) .transition() .duration(200) .style("fill", function(d) { return color((d.children ? d : d.parent).name); }); }); rects.append("text") .attr("class","node_text") .attr("transform",function(d,i){ return "translate(" + (d.x+20) + "," + (d.y+20) + ")"; }) .text(function(d,i) { return d.name; });注意上面的注释处,好好体会转换后的数据是怎么运用的。
4. 结果
完整代码,请点击下面的链接,再右键点击查看源代码:http://www.ourd3js.com/demo/J-3.0/rect_partition.html
文档信息
版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)发表日期:2014 年 11 月 23 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
相关文章推荐
- 【 D3.js 进阶系列 — 3.1 】 圆形分区图
- 【 D3.js 进阶系列 — 3.2 】 分区图的函数
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
- 【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
- 【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)
- 【 D3.js 进阶系列 — 2.2 】 力学图的参数
- 【 D3.js 进阶系列 】 进阶总结
- 【 D3.js 进阶系列 】 进阶总结
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- 【 D3.js 进阶系列 — 5.0 】 直方图
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- 【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
- 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽