这次是绘制饼状图，也是这一次使用D3绘制图表的最后一篇，大家可以从其他地方深入学习D3绘制图表，也可以直接查看D3的API进行学习，本次绘制饼状图的数据跟之前的卸载数组里面的不一样，这一次是使用d3的csv(url)函数读取的一个data.csv文件，在此声明，如果网页的编辑器不是使用自带的服务器打开网页的那就会读取不了csv文件报错，我这里使用的HBuilder，一款还不错的编辑器。

　　1.data.csv文件，以键值对的形式书写

education,population

大专及以上,11964

高中和中专,18799

初中,51966

小学,35876

文盲人口,5466

　　2.html代码，还是一如既往的简单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="container"></div>

    </body>

    <script type="text/javascript" src="js/d3.js" ></script>

    <script type="text/javascript" src="js/pinzhuangtu.js" ></script>

</html>

　　3.js代码

d3.csv("data.csv",type,function(data){

    width = 400,

    height = 400;

    var svg = d3.select("#container")

    .append("svg")

    .attr({

        "width":width,

        "height":height

    })

    var g = svg.append("g")

    .attr("transform","translate(200, 200)")

    var arc_generator = d3.svg.arc()

    .innerRadius(100)//设置内半径

    .outerRadius(200)//设置外半径

    var angle_data = d3.layout.pie()

    .value(function(d){return d.population;})

    console.log(angle_data(data));

    var color = d3.scale.category10();

    g.selectAll("path")

    .data(angle_data(data))

    .enter()

    .append("path")

    .attr("d", arc_generator)

    .style("fill",function(d,i){return color(i)})//给不同的扇形区填充不同的颜色

    g.selectAll("text")//给每个扇形去添加对应文字

    .data(angle_data(data))

    .enter()

    .append("text")

    .text(function(d){return d.data.education})

    .attr("transform",function(d){return "translate("+arc_generator.centroid(d)+")"})//调成每个文字的对应位置

    .attr("text-anchor","middle")//是文字居中

});

function type(d) {

    d.population =+ d.population;

    return d;

}

　　4.页面运行效果

使用D3绘制图表（7）--饼状图的更多相关文章

  1. C#绘制立体三维饼状图

    转载自原文 C#绘制立体三维饼状图(超酷) 内容原文地址:LINK [翻译]Julijan Sribar著3D Pie Chart一个用于绘制立体三维饼状图的C#类库[简介]本文的想法就是创建一个独立 ...

  2. BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图（案例）

    2014-12-25 Created By BaoXinjian

  3. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  4. FusionChart实现柱状图、饼状图的动态数据显示 附Demo

    最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...

  5. FusionChart实现柱状图、饼状图的动态数据显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  7. 第三方Charts绘制图表四种形式:饼状图，雷达图，柱状图，直线图

    对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...

  8. iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）

    1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...

  9. C# 绘制图表（柱状图，线性图，饼状图）

    http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...

随机推荐

  1. 汽车4S店经验指标完成情况报表制作分享

    集团公司一般为了加强下属的经营管理,以及项经营指标完情况,需要制定一些报表.我们平时也经常遇到这种情况,而这些报表要包括什么内容呢?该怎么制作呢?用什么制作呢?今天小编就以4s店为例,分享给大家一个报 ...

  2. AC日记——字符串位移包含问题 1.7 19

    19:字符串移位包含问题 总时间限制:  1000ms 内存限制:   65536kB 描述 对于一个字符串来说,定义一次循环移位操作为:将字符串的第一个字符移动到末尾形成新的字符串. 给定两个字符串 ...

  3. JavaScript语言精粹笔记

    JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取 ...

  4. 嵌入式Linux驱动学习之路(四)u-boot编译分析

    u-boot编译分析 在配置完成后,执行make开始编译.这里打开Makefile. 首先在目标all前有一句话首先检查是否有include/config.mk文件来判断是否成功配置过. ifeq ( ...

  5. NSDate 哪些事

    .什么是时间戳? 时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)至当前时间的总秒数. 2.NSDate,时间戳,NSString 之间的转换 //string 转 date + ...

  6. encodeURI和encodeURIComponent的区别

    这两个函数功能上面比较接近,但是有一些区别. encodeURI:不会进行编码的字符有82个 :!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z, ...

  7. repeater 根据输入 返回汉字

    page repeater <asp:Repeater ID="r_scoreCount" runat="server"> <HeaderTe ...

  8. Android开发之旅: Intents和Intent Filters（理论部分）

    引言 大部分移动设备平台上的应用程序都运行在他们自己的沙盒中.他们彼此之间互相隔离,并且严格限制应用程序与硬件和原始组件之间的交互. 我们知道交流是多么的重要,作为一个孤岛没有交流的东西,一定毫无意义 ...

  9. NOI2018准备 Day9

    tjvj清北入学测试又打了一上午,暴力搜索得了部分分,dp全崩了,8道题凑了500分. 下午打了个速度赛,成绩未知,另外又做了1道题,这效率low到爆!!!

  10. 2014-2015-2 《Java程序设计》课程学生博客列表

    20135101 曹钰晶 20135103 王海宁 20135104 刘 帅 20135105 王雪铖 20135109 高艺桐 20135111 李光豫 20135114 王朝宪 20135116 ...