【D3.js数据可视化系列教程】（二十三）--饼图圆环图

来源：互联网发布：数据有效性关键字编辑：程序博客网时间：2024/05/17 06:13

饼图圆环图

1. 饼布局

转化数据为适合生成饼图的对象数组

var pie = d3.layout.pie(dataset);

2. 绘制弧形

用svg的path绘制弧形的内置方法

var arc = d3.svg.arc()//设置弧度的内外径，等待传入的数据生成弧度  .outerRadius(outerRadius)  .innerRadius(innerRadius);

3. 颜色

var color = d3.scale.category10();//创建序数比例尺和包括10中颜色的输出范围

4. 弧分组

准备分组,把每个分组移到图表中心

var arcs = svg.selectAll("g.arc")  .data(pie(dataset))  .enter()  .append("g")  .attr("class","arc")  //移到图表中心  //translate(a,b)a表示横向平移距离，b表示纵向平移距离  .attr("transform","translate("+outerRadius+","+outerRadius+")");

5. 添加弧路径

为组中每个元素绘制弧形路路径

arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息    .attr("fill",function(d,i){//填充颜色        return color(i);    })    .attr("d",arc);//将角度转为弧度（d3使用弧度绘制）

6. 添加文字

为组中每个元素添加文本

arcs.append("text")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息    .attr("transform",function(d){         return "translate("+arc.centroid(d)+")";//计算每个弧形的中心点（几何中心）    })    .attr("text-anchor","middle")    .text(function(d){        return d.value;//这里已经转为对象了    });

7. 圆环

通过设置内半径生成圆环

var innerRadius = w/3;

8 完整代码

<!DOCTYPE html><html>  <head>        <meta charset="utf-8">        <title>testD3-20-pie.html</title>        <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>    <style type="text/css">    </style>    </head>    <body>        <script type="text/javascript">        var dataset=[5,10,20,40,6,25];        //(1)转化数据为适合生成饼图的对象数组        var pie=d3.layout.pie(dataset);        var h=300;        var w=300;        var outerRadius=w/2;//外半径        //(7)圆环内半径        var innerRadius=w/3;        //(2)用svg的path绘制弧形的内置方法        var arc=d3.svg.arc()//设置弧度的内外径，等待传入的数据生成弧度            .outerRadius(outerRadius)            .innerRadius(innerRadius);        var svg=d3.select("body")                .append("svg")                .attr("width",w)                .attr("height",h);        //(3)颜色函数        var color=d3.scale.category10();//创建序数比例尺和包括10中颜色的输出范围        //(4)准备分组,把每个分组移到图表中心        var arcs=svg.selectAll("g.arc")            .data(pie(dataset))            .enter()            .append("g")            .attr("class","arc")            //移到图表中心            .attr("transform","translate("+outerRadius+","+outerRadius+")");//translate(a,b)a表示横坐标起点，b表示纵坐标起点        //(5)为组中每个元素绘制弧形路路径        arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息            .attr("fill",function(d,i){//填充颜色                return color(i);            })            .attr("d",arc);//将角度转为弧度（d3使用弧度绘制）        //(6)为组中每个元素添加文本        arcs.append("text")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息            .attr("transform",function(d){                 return "translate("+arc.centroid(d)+")";//计算每个弧形的中心点（几何中心）            })            .attr("text-anchor","middle")            .text(function(d){                return d.value;//这里已经转为对象了            });        </script>    </body></html>