D3_book 11.1 pie

时间:2014-04-30 18:18:46   收藏:0   阅读:379
mamicode.com,码迷
<!-- 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>
mamicode.com,码迷

mamicode.com,码迷

 

问题:pie和chord的区别?

D3_book 11.1 pie,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!