码迷,mamicode.com
首页 > 其他好文 > 详细

D3_book 11.1 pie

时间:2014-04-30 18:18:46      阅读:379      评论:0      收藏:0      [点我收藏+]

标签:com   http   blog   style   class   div   img   code   java   c   log   

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

D3_book 11.1 pie

标签:com   http   blog   style   class   div   img   code   java   c   log   

原文地址:http://www.cnblogs.com/wang-jing/p/3699081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!