这次是绘制饼状图，也是这一次使用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. WPF使用后台C#代码创建Grid

    笔者刚刚接触WPF,菜鸟一枚,在做一个练手程序时遇到这样一个需求,创建一个新的Grid并将其添加至一个ListView中,要求Grid及其子元素应按一定顺序给Name属性赋值,直接使用XAML创建的话 ...

  2. 三维网格去噪算法（two-step framework）

    基于两步法的网格去噪算法顾名思义包含两个步骤:首先对网格表面的法向进行滤波,得到调整后的网格法向信息,然后根据调整后的法向更新顶点坐标位置,下面介绍三篇该类型的文章. [Sun et al. 2007 ...

  3. NOIP2015 子串

    #149. [NOIP2015]子串 有两个仅包含小写英文字母的字符串 AA 和 BB. 现在要从字符串 AA 中取出 kk 个互不重叠的非空子串,然后把这 kk 个子串按照其在字符串 AA 中出现的 ...

  4. poj1637 Sightseeing tour

    Sightseeing tour Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8859   Accepted: 3728 ...

  5. net面试 ASP.NET页面传值的各种方法和分析 （copy)

    Web页面是无状态的, 服务器对每一次请求都认为来自不同用户,因此,变量的状态在连续对同一页面的多次请求之间或在页面跳转时不会被保留.在用ASP.NET 设计开发一个Web系统时, 遇到一个重要的问题 ...

  6. koala编译scss文件时不支持中文字体的解决方案

    第一种方案:在scss文件第一行加上这行代码@charset "utf-8"; 第二种方案: scss文件编译时候使用ruby环境,出现 Syntax error: Invalid ...

  7. Linux下Mongodb安装和启动配置

    1.下载安装包 wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-1.8.2.tgz 下载完成后解压缩压缩包 tar zxf mongod ...

  8. 主机无法访问虚拟机Linux的apache

    在虚拟机linux里安装了httpd,即appache,启动后,按正常情况在主机是可以用浏览器通过访问虚拟机linux的ip来访问的.如果出现无法访问的情况,解决办法可以参考如下: 这里我的虚拟机联网 ...

  9. Discuz! X2.5判断会员登录状态及外部调用注册登录框

    Discuz! X2.5判断会员登录状态及外部调用注册登录框 有关discuz论坛会员信息,收集的一些资料: 用dedecms+discuz做了个门户加论坛形式的网站,但是dedecms顶部目前只能q ...

  10. ES6 .Set数据结构去除重复元素

    用法一 var set = new Set([1, 2, 3, 4, 2, 8, 4]); //两个2 for (var elem of set) { console.log(elem) // 输出结 ...