这次是绘制饼状图，也是这一次使用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. 续评《遇到一位ITer，一位出租车司机，必看》

    链接:<遇到一位ITer,一位出租车司机,必看> 续评:       我算不上严格意义上的共产主义者,但是算是坚定的共富主义者,切忌不能理解为平均主义者.就是说你开个大奔,我最起码也得能开 ...

  2. Codeforces 549G Happy Line[问题转换　sort]

    G. Happy Line time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  3. 用AutoCompleteTextView实现历史记录提示

    自定义AutoCompleteTextView 博客分类: android进阶 android  网上找到的都是同ArrayAdapter一起使用的,有时候需要自定义风格,咋办?follow me! ...

  4. pullRefresh组件配置

    mui.init({ pullRefresh:{ container: '#contanier', indicators:false, up:{ height:200, contentinit: '' ...

  5. HTML 学习笔记 JavaScript (对象)

    javaScript中所有的事物都是对象:字符串 数字 数组 日期 等等. 在javaScript中 对象是拥有属性和方法的数据. 属性和方法 属性是与对象相关的值 方法是能够在对象上执行的操作. 举 ...

  6. django整合原有的mysql数据库

    虽然django适合从零开始构建一个项目,但有时候整合原有的数据库也在所难免,下面以django整合我的mysql作说明. mysql数据是我从京东上抓取的数据,数据表名为jd,演示如图 下面将jd整 ...

  7. ItemIndex

    ItemIndex一般是列表的一个属性,比如TCombobox和TListBox都有,表示当前选中的项(Item)的下标(Index),如果没有选中,那它是-1,所以一般判断TCombox或TList ...

  8. 架设ftp反向代理服务器

    因网络环境限制,需要从内网(不能直接连通外网)向外部的ftp上传.下载文件,只能在网关服务器上架设ftp反向代理(网关服务器可同时连通外网与内网,但是不允许内部应用部署在这台机器上). 试了几个方案: ...

  9. WPF：自动执行"机器人"程序若干注意事项

    企业应用中,经常会遇到一些需要定时自动执行的程序来完成某些功能,比如:自动定时从第三方web service取回数据.定时对历史数据进行清理.定时向ftp上传业务数据... 这类程序,我习惯称为“机器 ...

  10. Alpha阶段事后分析报告

    每个团队编写一个事后分析报告,对于团队在Alpha阶段的工作做一个总结. 请在2016年11月24日上课之前根据下述博客中的模板总结前一阶段的工作,发表在团队博客上,并在课上的事后分析会上进行汇报,并 ...