1、数据

　　有如下数据，需要可视化：

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

　　这样的值是不能直接绘图的。例如绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于数组 dataset 中。因此，需要用到布局，布局的作用就是：计算出适合于作图的数据。这个过程称为数据转换

2、布局（数据转换）

　　定义一个布局，返回值赋给变量 pie，此时 pie 可以当做函数使用。

var pie = d3.layout.pie();

　　将数组 dataset 作为 pie() 的参数，返回值给 piedata。如此一来，

　　piedata 就是转换后的数据。

　　简单吧，非常轻松就得到了。在控制台输出 piedata ，让我们来看看数据转换成什么了。

var piedata = pie(dataset);

　　 

　　如上图所示，5 个整数被转换成了 5 个对象（Object） ，每个对象都有变量起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。

　　千万记住：布局不是要直接绘图，而是为了得到绘图所需的数据。

 3、绘制图形

　　为了根据转换后的数据 piedata 来作图，还需要一样工具：生成器。

　　SVG 有一个元素，叫做路径 <path>，是 SVG 中功能最强的元素，它可以表示其它任意的图形。顾名思义，路径元素就是通过定义一个段“路径”，来绘制出各种图形。

　　但是，路径是很难计算的，通过布局转换后的数据 piedata 仍然很难手动计算得到路径值。为我们完成这项任务的，就是生成器。

　　这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一段弧。

var outerRadius = 150; //外半径

var innerRadius = 0; //内半径，为0则中间没有空白

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

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

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

　　弧生成器返回的结果赋值给 arc。此时，arc 可以当做一个函数使用，把 piedata 作为参数传入，即可得到路径值。

　　接下来，可以在 SVG 中添加图形元素了。先在 <svg> 里添加足够数量（5个）个分组元素（g），每一个分组用于存放一段弧的相关元素。

var arcs = svg.selectAll("g")

    .data(piedata)

    .enter()

    .append("g")

    .attr("transform","translate("+ (width/2) +","+ (width/2) +")");

　　接下来对每个 <g> 元素，添加 <path> 。

arcs.append("path")

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

        return color(i);

    })

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

        return arc(d);   //调用弧生成器，得到路径值

    });

　　因为 arcs 是同时选择了 5 个 <g> 元素的选择集，所以调用 append(“path”) 后，每个 <g> 中都有 <path> 。路径值的属性名称是 d，调用弧生成器后返回的值赋值给它。要注意，arc(d) 的参数 d 是被绑定的数据。

　　另外，color 是一个颜色比例尺，它能根据传入的索引号获取相应的颜色值，定义如下。

var color = d3.scale.category10();   //有十种颜色的颜色比例尺

　　然后在每一个弧线中心添加文本。

arcs.append("text")

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

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

    })

    .attr("text-anchor","middle")

    .text(function(d){

        return d.data;

    });

　　arc.centroid(d) 能算出弧线的中心。要注意，text() 里返回的是 d.data ，而不是 d 。因为被绑定的数据是对象，里面有 d.startAngle、d.endAngle、d.data 等，其中 d.data 才是转换前的整数的值。

<html>

  <head>

        <meta charset="utf-8">

        <title>饼状图</title>

  </head> 

<style>

</style>

    <body>

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

        <script>

        var width = 400;

        var height = 400;

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

        var svg = d3.select("body")

                    .append("svg")

                    .attr("width", width)

                    .attr("height", height);

        var pie = d3.layout.pie();

        var piedata = pie(dataset);

        var outerRadius = 150;    //外半径

        var innerRadius = 0;    //内半径，为0则中间没有空白

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

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

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

        var color = d3.scale.category10();

        var arcs = svg.selectAll("g")

                      .data(piedata)

                      .enter()

                      .append("g")

                      .attr("transform","translate("+ (width/2) +","+ (width/2) +")");

        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;

            });

        console.log(dataset);

        console.log(piedata);

        </script>  

    </body>

</html>

D3.js 饼状图的制作的更多相关文章

  1. js饼状图（带百分比）功能实现，新人必懂

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. D3.js：饼状图的制作

    假设有如下数据需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度, ...

  3. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

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

    本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...

  5. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  6. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

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

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  8. 使用d3.v5实现饼状图

    效果图: 饼状图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. android的基础入门

        一.   A通信技术   1. 1G  仅限语音的蜂窝式通话标准 2. 2G  (时分多路复用)数字语音传输技术和增加接收数据的功能 3. 3G  传输声音和数据的速度有很大的 提升 4. 4 ...

  2. Semi-prime H-numbers(筛法)

    Semi-prime H-numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8069 Accepted: 3479 ...

  3. HDU 4630 No Pain No Game 线段树 和 hdu3333有共同点

    No Pain No Game Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. Nginx架构的企业级应用

    Nginx架构的企业级应用 ==================================================== 实现HA高可用集群 实现LB负载均衡集群 Nginx实现反向代理 ...

  5. PHP 之 FastCGI 与 mod_php 详解

    背景 PHP最常用的方式是以模块的方式(mod_php)运行在Apache中,也是Apache运行PHP的默认方式:但在Nginx中,Nginx又使用的是PHP-FPM,但是PHP-FPM到底是个什么 ...

  6. 关于打开MTK_SDCARD_SWAP 宏后MTK目前升级方案和 关于打开MTK_SHARED_SDCARD宏后MTK目前升级方案

    如果设置宏MTK_SDCARD_SWAP=yes:默认是优先从外卡获取升级包,外卡没有包,才会去内卡获取!   1.插入外卡,升级包update.zip放入外卡,升级可以成功!   2.插入外卡,升级 ...

  7. HDU 5059 Harry And Biological Teacher

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5069 题意:给出n个串,m个询问,每个询问(u,v),求u的一个最长后缀是v的前缀. 思路:离线.将关于u ...

  8. BZOJ 1822 Frozen Nova 冷冻波（最大流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1822 题意:WJJ喜欢“魔兽争霸”这个游戏.在 游戏中,巫妖是一种强大的英雄,它的技能F ...

  9. JAVA语言基础——字符串

    1.字符串的比较代码 String.equals System.out.println("str1和str2是否相同:"+(str1.equals(str2))); equals在 ...

  10. Logical Address->Linear Address->Physical Address

    3 registers for starting pos: LDTR, GDTR( register for starting addr of DT) ---段描述符每个段由一个8字节(64位)的段描 ...