<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>饼状图</title>

     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

     <style>

         svg {

             width: 600px;

             height: 600px;

             display: block;

             margin: 100px auto;

         }

         text {

             fill: #fff;

         }

     </style>

 </head>

 <body>

 <svg></svg>

 </body>

 </html>

 <script>

     var svg = d3.select('svg');

     var color = d3.scale.category10();

     var dataset = [30, 10, 43, 55, 13];

     // 这样的值是不能直接绘制图形的，例如绘制饼图的一部分，需要知道一段弧度的起始位置和终止角度，这些值都不存在于数组的dataset中，因此需要用到布局

     // 布局的作用就是：计算出适合于作图的数据

     var pie = d3.layout.pie();

     var piedata = pie(dataset)

     console.log(piedata)//5个整数倍转换成了5个对象，每个对象都有：起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。

     // 绘制图形

     // 为了根据转换后的piedata绘图，还需要一样工具：生成器

     // 弧生成器

     var outerRadius = 150;

     var innerRadius = 100;

     var arc = d3.svg.arc()//弧生成器；

         .innerRadius(innerRadius)//设置内半径

         .outerRadius(outerRadius)//设置外半径

     // 先添加g，再添加path

     var arcs = svg.selectAll('g')

         .data(piedata)

         .enter()

         .append('g')

         .attr("transform", "translate(200,200)");

     // 接下来给每个g添加path

     arcs.append('path')

         .attr('fill', function (d, i) {

             return color(i)

         })

         .attr('d', function (d) {

             return arc(d)

         })

     // 添加文本

     arcs.append("text")

         .attr("transform", function (d) {

             return "translate(" + arc.centroid(d) + ")";

         })

         .attr("text-anchor", "middle")//水平居中；

         .text(function (d) {

             return d.data;

         });

 </script>

d3绘制饼状图的更多相关文章

  1. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  2. 第166天：canvas绘制饼状图动画

    canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. Canvas(3)---绘制饼状图

    Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...

  4. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  5. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. IOS之以UIBezierPath绘制饼状图

    1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath*  aPath = [[UIBe ...

  7. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

  8. matplotlib绘制饼状图

    源自http://blog.csdn.net/skyli114/article/details/77508430?ticket=ST-41707-PzNbUDGt6R5KYl3TkWDg-passpo ...

  9. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

随机推荐

  1. XamarinSQLite教程添加索引

    XamarinSQLite教程添加索引 索引可以提升数据库表的查询速度.下面为已存在的表添加索引,操作步骤如下: (1)右击Students,选择Add index…(beta)命令,弹出Add In ...

  2. 在Windows系统下安装Beautiful Soup4的步骤和方法

    1.到http://www.crummy.com/software/BeautifulSoup/网站上上下载,最新版本是4.3.2. 2.下载完成之后需要解压缩,假设放到D:/python下. 3.运 ...

  3. 《动物世界》的剪刀石头布 HDU --- 6418

    题目连接: https://vjudge.net/problem/1812686/origin emmm 这一题的资料来自<动物世界>这一个李易峰演的电影.. 主要的思路就是概率,但是会牵 ...

  4. BZOJ.4453.cys就是要拿英魂！(后缀数组 单调栈)

    BZOJ 求字典序最大,容易想到对原串建后缀数组求\(rk\). 假设当前区间是\([l,r]\),对于在\([l,r]\)中的两个后缀\(i,j\)(\(i<j\)),显然我们不能直接比较\( ...

  5. Java并发编程（一）-- 多线程的基本概念

    多线程发展进程 在过去单CPU时代,单任务在一个时间点只能执行单一程序:发展到多任务阶段,计算机能在同一时间点并行执行多任务或多进程--虽然并不是真正意义上的“同一时间点”,而是多个任务或进程共享一个 ...

  6. Linux服务部署--Java（一）

    网络配置 一.配置dns 1.修改/etc/NetworkManager/NetworkManager.conf 文件,在main部分添加 “dns=none” 选项: 2.NetworkManage ...

  7. JavaScript基础笔记（一）基本概念

    基本概念 一.语法 一)区分大小写 二)标识符 书写规则同Java 三)注释 略 四)严格模式 1.在整个脚本中启用严格模式:在顶部添加 "use strict" 2.指定函数在严 ...

  8. cout endl in c++

    #include<iostream> using namespace std; int main() { cout<<endl; endl(cout); getchar(); ...

  9. C# 计算地图上某个坐标点的是否在多边形内

    这个方法引用自群友的博客 https://www.xiaofengyu.com/?p=143 使用百度地图的时候,常常会用到判断一个点是否在一个多边形的范围内,该方法用到的是射线法, 通过修改Java ...

  10. 分析java内存情况

    使用pmap查看进程内存 运行命令 使用pmap可以查看某一个进程(非java的也可以)的内存使用使用情况, 命令格式: pmap 进程id 示例说明 例如运行: pmap 12358 显示结果如下图 ...