我个人的博客： 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 ) 这样才转换数据。我们能够先看看转换后输出什么样的数据。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpobHp6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

如上图所看到的，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>

【 D3.js 入门系列 --- 9.1 】 生产饼图的更多相关文章

  1. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  2. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  3. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  4. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  5. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  6. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  7. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  8. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  9. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

  10. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

  1. Windows下一个AndroidStudio 正在使用Git(AndroidStudio工程GitHub关联)

    前提条件 : 1. 设备 Git client 下载链接 2. 有着 GitHub 账号 (假设你已经有了一些git基础, 假设还一点都不会, 请去找其它加成学习) AndroidStudio项目公布 ...

  2. Tomcat启动错误，端口占用

    错误信息: Several ports (8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...

  3. BAE3.0搭建wordpress注意

    仅仅是mark一个注意的点,数据库连接时,主机是: /** MySQL主机 */ define('DB_HOST', 'sqld.duapp.com:4050');

  4. 在基于阿里云serverCentOS6.5下安装Subversion 1.6.5服务

    近期阿里云搞了个1元免费提供云server的活动,偶心痒痒就申请了一个. 正好能够作为团队的SVNserver了,以下就来部署SVN服务吧. 一.安装基础环境 apr-1.5.0.tar.gz apr ...

  5. HTML5_表单元素

    <!DOCTYPE html> <hmtl> <html  lang="zh-cn"> <head> <meta charse ...

  6. 同一时候使用windows和linux系统

    相信非常多人又想使用方便的windows,可是在开发中必须使用linux,怎样选择呢? 没关系,这里教你怎样制作双系统. 下载wubi,仅仅有几兆大,直接在windows下安装,安装好以后,双系统就制 ...

  7. 如何区分MNO和MVNO

    MVNO(Mobile Virtaul Network Operator)虚拟网络运营商,没有自己的物理网络,租用MNO(Mobile Network Operator)网络提供的网络服务. 我们知道 ...

  8. 【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取

    CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什 ...

  9. 同步（Synchronization）

    多线程应用程序的存在,在运行打开一个潜在的多线程安全的接入资源. 两个线程相同的资源可能会以意想不到的方式改变相互干扰. 例如.一个线程可以覆盖有一个线程改变或使应用程序进入一个潜在的无效的状态未知. ...

  10. lua基金会【五岁以下儿童】I/O文件操作

    --[[ lua操作相关文件I/O ]]-- --件,假设该文件不存在的话, --lua会帮助我们在你规定的文件夹下创建这个文件,前提是该文件夹要存在 --[[ 同一时候我们应该掌握写入文件的模式: ...