1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>饼状图</title>
  6.      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  7.      <style>
  8.          svg {
  9.              width: 600px;
  10.              height: 600px;
  11.              display: block;
  12.              margin: 100px auto;
  13.          }
  14.  
  15.          text {
  16.              fill: #fff;
  17.          }
  18.      </style>
  19.  </head>
  20.  <body>
  21.  <svg></svg>
  22.  </body>
  23.  </html>
  24.  <script>
  25.      var svg = d3.select('svg');
  26.      var color = d3.scale.category10();
  27.  
  28.      var dataset = [30, 10, 43, 55, 13];
  29.      // 这样的值是不能直接绘制图形的，例如绘制饼图的一部分，需要知道一段弧度的起始位置和终止角度，这些值都不存在于数组的dataset中，因此需要用到布局
  30.      // 布局的作用就是：计算出适合于作图的数据
  31.      var pie = d3.layout.pie();
  32.      var piedata = pie(dataset)
  33.      console.log(piedata)//5个整数倍转换成了5个对象，每个对象都有：起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。
  34.      // 绘制图形
  35.      // 为了根据转换后的piedata绘图，还需要一样工具：生成器
  36.      // 弧生成器
  37.      var outerRadius = 150;
  38.      var innerRadius = 100;
  39.      var arc = d3.svg.arc()//弧生成器；
  40.          .innerRadius(innerRadius)//设置内半径
  41.          .outerRadius(outerRadius)//设置外半径
  42.      // 先添加g，再添加path
  43.      var arcs = svg.selectAll('g')
  44.          .data(piedata)
  45.          .enter()
  46.          .append('g')
  47.          .attr("transform", "translate(200,200)");
  48.      // 接下来给每个g添加path
  49.      arcs.append('path')
  50.          .attr('fill', function (d, i) {
  51.              return color(i)
  52.          })
  53.          .attr('d', function (d) {
  54.              return arc(d)
  55.          })
  56.      // 添加文本
  57.      arcs.append("text")
  58.          .attr("transform", function (d) {
  59.              return "translate(" + arc.centroid(d) + ")";
  60.          })
  61.          .attr("text-anchor", "middle")//水平居中；
  62.          .text(function (d) {
  63.              return d.data;
  64.          });
  65.  
  66.  </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. dns服务扩展

  2. 错误代码：0x80070032 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”

    错误分析: vs2010默认采用的是.NET 4.0框架,4.0框架是独立的CLR,和.NET 2.0的不同,如果想运行.NET 4.0框架的网站,需要用aspnet_regiis注册.NET 4.0 ...

  3. DTL

    DTL:Django模板语言(Django Template Language). 一.变量 1.视图函数可以通过两种方式将变量传递给模板页面: ① render(request, 'test_pag ...

  4. 手机端input获取焦点弹出键盘时挡住input解决方案

    问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...

  5. BZOJ.4340.[BJOI2015]隐身术(后缀数组 搜索)

    BZOJ \(Description\) 给定两个串\(S,T\)以及一个数\(k\),求\(T\)中有多少个子串,满足和\(S\)的编辑距离不超过\(k\). \(|S|+|T|\leq10^5,\ ...

  6. Java笔记（十四） 并发基础知识

    并发基础知识 一.线程的基本概念 线程表示一条单独的执行流,它有自己的程序计数器,有自己的栈. 1.创建线程 1)继承Thread Java中java.lang.Thread这个类表示线程,一个类可以 ...

  7. 2009 ACM 水题

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2009 思路:寻找平方根的函数,c++里面有sqrt,一定要注意 1 添加头文件#include <i ...

  8. LeetCode(12. 整数转罗马数字)

    问题描述 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II , ...

  9. PhotoshopCC 2017安装破解 + cuterman

    之前安装了PhotoshopCC 2017版本的软件,但是绿色版的(安装简介.使用方便).但是在随着Adobe公司对设计的不断追求和工具的不断更新,更加强大.更加优秀的设计插件和工具不断出新,最近朋友 ...

  10. BZOJ4039 : 集会

    将曼哈顿距离转化为切比雪夫距离,即: $|x_1-x_2|+|y_1-y_2|=\max(|(x_1+y_1)-(x_2+y_2)|,|(x_1-y_1)-(x_2-y_2)|)$ 那么每个点能接受的 ...