使用D3绘制图表(7)--饼状图

  这次是绘制饼状图,也是这一次使用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.页面运行效果

时间: 2024-11-05 14:38:58

使用D3绘制图表(7)--饼状图的相关文章

JavaScript+svg绘制的一个饼状图

svg参考:https://www.w3.org/TR/SVG/ <body onload='document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, ["red","blue","yellow","green"], ["North","South","East","W

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

最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资料都比较零散.不完整,或者说没有简洁明了的说清楚其用法,到FusionChart官网上去看,无奈是英文的,而且Deom项目太大,没有耐心去看,最后还是将以前的项目找出来,摸索着弄了下搞定,现将FusionChart实现柱状图.饼状图的动态数据显示的方法和经验写出来,希望对做web开发需要的朋友能有所

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

C# 绘制图表(柱状图,线性图,饼状图)

http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series["Series1"].Points.Count;  Chart1.Series["Series1"].CustomProperties = "PointWidth=0.5";  Chart1.Width = Unit.Pixel(25 * a); 如果有多个S

AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗人汪国真之口,出处<她>.且抛开上下文,单从这短短几句,正恰如其分的折射出有一群人,他们穿着不那么fashion,言辞不那么犀利,但是内心某一块地方像是躁动的火山,拥有无尽的动力和激情,矢志不渝种子般投身到技术研究和心得分享当中. 或许每一次的生长都是那么悄无声息,但是无数次的坚持只是为了破土那日

Android图表库MPAndroidChart(八)——饼状图的扩展:折线饼状图

Android图表库MPAndroidChart(八)--饼状图的扩展:折线饼状图 我们接着上文,饼状图的扩展,增加折现的说明,来看下我们要实现的效果 因为之前对MPAndroidChart的熟悉,所有我们就可以直接来实现了 一.基本实现 首先,就是我们的来看下他的定义布局 <com.github.mikephil.charting.charts.PieChart android:id="@+id/mPieChart" android:layout_width="mat

MPAndroidChart开源图表库(一)之饼状图

MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活.MPAndroidChart同样拥有常用的图表类型:线型图.饼图.柱状图和散点图. GitHub地址: https://github.com/PhilJay/MPAndroidChart 下面主要实现以下饼状图: 1.从上面的地址中下载最新mpandroidchartlibrary-2-0-8.jar包,

【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制 与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q

【 D3.js 入门系列 --- 9.1 】 饼状图的制作

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 这一节用 Layout 做一个饼状图.第9节中说过, Layout 的作用只是转换数据,将不适合图形化的数据转化成适合图形化的数据.现在使用以下数据: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这个数据要不能直接用于画饼状图,我们必须通过计算将它转换成角度.这个计算不需要我们手动计算,因为 D3 中提供了 d3.layo