这次是绘制饼状图，也是这一次使用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. 开发Eclipse自定义控件

    摘自:http://www.ibm.com/developerworks/cn/opensource/os-eclipcntl/ 我们在开发自定义控件时主要考虑以下问题: 1. 自定义控件的绘制:通常 ...

  2. [转]Asp.net MVC使用Filter解除Session, Cookie等依赖

    本文转自:http://www.cnblogs.com/JustRun1983/p/3279139.html 本文,介绍了Filter在MVC请求的生命周期中的作用和角色,以及Filter的一些常用应 ...

  3. MMORPG大型游戏设计与开发（part4 of net）

    上一节简单的介绍了服务器消息处理的流程,想必大家对这方面有了初步的认识,接下来我们需要知道和掌握的便是其中一些重要的方法,进一步深入熟悉整个构架. 1.FD_*系列宏函数 FD_ZERO(fd_set ...

  4. ComboBox的数据联动

    实现效果: 点击年级下拉框值时,获取科目下拉框值 一:加载年级下拉框值 GradeDAL层: //检索所有年级名称集合,返回的是泛型集合List<Grade> public List< ...

  5. 渗透中Necat的另类用法

    Necat 是一个伟大而实用的用于 TCP 和 UPD 网络连接协议的读写程序.同时 Necat 也被誉为网络中的瑞士军刀,在许多黑客教程中 Necat 也被广泛使用.Necat 最常见用途是设置反向 ...

  6. Android资料之-EditText中的inputType

    在编写有EditText的自定义控件的时候可能会用到EditText的inputType属性,直接在xml里写这个属性的时候是用字符串型的,不过动态设置的时候就变成int型了,InputType里有定 ...

  7. PAT 1005. 继续(3n+1)猜想 (25)

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证的时候, ...

  8. JQuery学习

    首先要明白一点,JQuery是一个JS的封装库,目的是为了关注点分离,让前端更加侧重于界面显示,而不是各个浏览器不同的差异性,下面是JQuery的一些常用的基本用法 一,JQuery语法 window ...

  9. BZOJ 1040 【ZJOI2008】 骑士

    Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火 ...

  10. 微软职位内部推荐-SW Engineer II for Cloud Service

    微软近期Open的职位: Positions: SDE for Big Data Cloud Services Azure Big Data Cloud Services and Cosmos are ...