【 D3.js 入门系列 --- 9.1 】 饼状图的制作
来源:互联网 发布:淘宝售前客服工作总结 编辑:程序博客网 时间:2024/05/16 01:42
本人的个人博客为: www.ourd3js.com
csdn博客为: blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
这一节用 Layout 做一个饼状图。第9节中说过, Layout 的作用只是转换数据,将不适合图形化的数据转化成适合图形化的数据。现在使用以下数据:
var dataset = [ 30 , 10 , 43 , 55 , 13 ];
这个数据要不能直接用于画饼状图,我们必须通过计算将它转换成角度。这个计算不需要我们手动计算,因为 D3 中提供了 d3.layout.pie() 函数,这个 Layout 就是用于将上面这样的数据转换成饼状图需要的角度。下面定义一个这样的函数。
var pie = d3.layout.pie();一定要记住,这是一个函数,使用它的时候,要 pie( dataset ) 这样才转换数据。我们可以先看看转换后输出什么样的数据。
如上图所示,5个整数被转换成了5个 Object ,每个里面存有起始角度和结束角度,以及原整数。这样的数据适合做饼状图,这就是 Layout 的作用。但是要注意,实际作图时,还是需要别的作图方法的。
我们可用做弧线的方法来作饼状图,因为弧线有粗细,调整粗细就能变成饼状图,下面我们添加如下代码:
var outerRadius = width / 2;var innerRadius = width / 4;var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);outerRadius 和 innerRadius 是弧线的外半径和内半径,width 是 svg 绘制框的宽度, outerRadius - innerRadius 就是弧线的粗细。然后我们定义一个弧线的函数 arc ,并把内外半径传给它。要注意 arc 也是一个函数。
接下来可以作图了,和前几节一样,都是在 svg 框内作图。上面的有5个整数,也就是有5段弧线。我们先在 svg 里添加5个分组( 也就是 svg 中的元素 g )。每一个分组就是一段弧线。代码如下:
var arcs = svg.selectAll("g") .data(pie(dataset)) .enter() .append("g") .attr("transform","translate("+outerRadius+","+outerRadius+")");上面的代码中,我们绑定了转换后的数据 pie(dataset) ,有5个数据,所以会添加5个g元素,最后一行代码是移动元素的位置,默认的起始位置是 svg 绘制框的 (0,0) 坐标,也就是左上角。要注意,这个时候上面代码返回的是同时选择5个g元素的选择。
接下来对每个g元素,添加 path 。
arcs.append("path").attr("fill",function(d,i){return color(i);}).attr("d",function(d){return arc(d);});因为 arcs 是同时选择5个g元素的,所以 append("pah") 后,是每一个 g 中都有 path ,然后再添加颜色属性,和路径属性。颜色属性的 color(i) 是定义的一个函数。
var color = d3.scale.category10();SVG 中的路径属性是 d, 它的值是 arc(d) ,也就是将绑定的数据作为上面定义的函数 arc 的参数算出的值。
接下来在每一个弧线中心添加文本。
arcs.append("text").attr("transform",function(d){return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor","middle").text(function(d){return d.value;});arc.centroid(d) 能算出弧线的中心,要注意一句代码,返回的是 d.value ,而不是 d,因为当前绑定的数据是 Object,里面有起始角度等值,d.value 是元整数的值,可见上面的截图。
好了,看看结果图吧。
完整代码如下:
<html> <head> <meta charset="utf-8"> <title>Pie</title> </head> <style></style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script>var width = 600;var height = 600;var dataset = [ 30 , 10 , 43 , 55 , 13 ];var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);var pie = d3.layout.pie();var outerRadius = width / 2;var innerRadius = width / 4;var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);var color = d3.scale.category10();var arcs = svg.selectAll("g") .data(pie(dataset)) .enter() .append("g") .attr("transform","translate("+outerRadius+","+outerRadius+")"); arcs.append("path").attr("fill",function(d,i){return color(i);}).attr("d",function(d){return arc(d);});arcs.append("text").attr("transform",function(d){return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor","middle").text(function(d){return d.value;});console.log(dataset);console.log(pie(dataset)); </script> </body> </html>
11 0
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- 【 D3.js 入门系列 --- 9.2 】 力学图的制作
- 【 D3.js 入门系列 --- 9.3 】 弦图的制作
- 【 D3.js 入门系列 --- 9.4 】 集群图的制作
- 【 D3.js 入门系列 --- 9.5 】 树状图的制作
- 【 D3.js 入门系列 --- 9.6 】 打包图的制作
- D3.js 饼状图的制作
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
- 【 D3.js 入门系列 --- 10 】 地图的绘制
- 【 D3.js 入门系列 --- 10.2 】 可拖动的地图
- D3.js制作二维坐标轴基本入门
- 【 D3.js 视频系列 】 飞速入门
- 【 D3.js 入门系列 — 5 】 坐标轴
- 【 D3.js 视频系列 】 飞速入门
- 使用D3.js实现柱形图的制作
- d3.js学习9----地图的制作
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
- D3.js -- 图片制作
- 1010. Radix (25)
- Bloom filter(布隆过滤器)
- 6-选择结构
- php大型网站如何提高性能和并发访问
- POJ 1260 Pearls
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- asp.net 生成静态网页并加连接
- 基于Ofbiz的Web框架
- 经纬财富:台州早盘天通银策略
- Spring实用功能--Profile、WebService、缓存、消息、ORM
- <SVN migrate to GIT>CentOS安装SVN::Core时的一点错误
- SMT、CMP、SMP
- 杭电1166敌兵布阵 (用的树状数组)
- win8.1系统自带微软拼音输入法卸载教程