D3_book 11.1 pie

<!-- pie example -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var dataset=[5,10,20,45,6,25];
var pie=d3.layout.pie();  //只是生成饼图数据的函数
var w=300,h=300;
var outerRadius=w/2;
var innerRadius=10;
var color=d3.scale.category10();  //生成颜色的快捷函数

var arc=d3.svg.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
          ;
var svg=d3.select('body')
          .append('svg')
          .attr({
            'width':w
            ,'height':h
          })
          ;
var arcs=svg.selectAll('g.arc')
            .data(pie(dataset))
            .enter()
            .append('g')
            .attr({
              'class':'arc'
              ,'transform':'translate('+outerRadius+','+outerRadius+')'
            })
            ;
arcs.append('path')
    .attr({
      'fill':function(d,i){
        return color(i);
      }
      ,'d':arc
    })
    ;
arcs.append('text')
    .attr({
      'text-anchor':'middle'
      ,'transform':function(d){
        return 'translate('+arc.centroid(d)+')';
      }      
    })
    .text(function(d){return d.value;})
    ;
</script>

 

问题:pie和chord的区别?

posted on 2014-04-29 14:04  j.w  阅读(241)  评论(0编辑  收藏  举报