这次是绘制饼状图，也是这一次使用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. NOIP2009 提高组T3 机器翻译 解题报告-S.B.S

    题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...

  2. web测试方法

    首先互联网B/S系统一般分为三层,即表示层.业务逻辑层.数据层,下面是我整理的关于web的测试方法. 表示层 一.功能测试 1.链接测试 确认每个链接有效且正确跳转 2.表单测试 确认表单能正常提交, ...

  3. vijos1907[noip2014]飞扬的小鸟（完全背包）

    描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣告 ...

  4. Lambda表达式详解（转载）

    原文链接:http://www.cnblogs.com/knowledgesea/p/3163725.html lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算 ...

  5. 全球首发免费的MySql for Entity Framework Core

    from:http://www.1234.sh/post/pomelo-data-mysql?utm_source=tuicool&utm_medium=referral Source 源代码 ...

  6. ASP.NET MVC的Web Api的实练

    学习ASP.NET MVC一年多来,现在该学学Web Api了.API与ASP.NET MVC的Controller差不多.前者只是返回数据序列化和发送给客户端: 后者返回View或Render Vi ...

  7. mongodb.conf配置文件详解

    mongod --config /etc/mongodb.conf 配置如下:verbose:日志信息冗余.默认false.提高内部报告标准输出或记录到logpath配置的日志文件中.要启用verbo ...

  8. [py]给函数传递数组和字典

    一 , 1.1传元组 def fun(x): print x t=(1,2) fun(t) 1.2传元组 #传元组 def fun(x,y): print x,y # t=(1,2) t=(1,2,3 ...

  9. QT 记事本小程序

    //mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <Q ...

  10. shiro退出登陆清空缓存实现

    上一篇介绍了使用springmvc集成shiro登陆过程(http://www.cnblogs.com/nosqlcoco/p/5579081.html),通过FormAuthenticationFi ...