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

2013-11-03

【D3.V3.js数据可视化系列教程】（二十三）--饼图圆环图 //(1)转化数据为适合生成饼图的对象数组var pied3.la

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

//(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")
//移到图表中心
.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;//这里已经转为对象了
  });

//(7)圆环内半径

var innerRadius=w/3;

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

<!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>

热点排行

JavaScript

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