d3.js——绘制饼状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图</title>
</head>
<body>
<script src = "d3.js"></script>
<script src = "js/bing.js"></script>
</body>
</html>

/**
 * Created by Silence_C on 2016/4/25.
 */
var width = 600,
    height = 600;
var dataset = [30,10,43,55,13];
var svg = d3.select("body").append("svg")
        .attr("width",width)
        .attr("height",height)
var pie = d3.layout.pie();

//用做弧线的方法来作饼状图,因为弧线有粗细,调整粗细就能变成饼状图
var outerRadius = width/ 2,
    innerRadius =150;
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var color = d3.scale.category10();//构造一个有10种颜色的序数比例尺

var arcs = svg.selectAll("g")
    .data(pie(dataset))//通过 D3中提供的d3.layout.pie()函数将它转换成角度。这里5个整数被转换成了5个 Object ,每个里面存有起始角度和结束角度,以及原整数
    .enter()
    .append("g")
    .attr("transform","translate("+outerRadius+","+outerRadius+")");

arcs.append("path")
.attr("fill",function(d,i){
    return color(i);
})
.attr("d",function(d){
    return arc(d); //绘制圆环
})

arcs.append("text")
.attr("transform", function (d,i){
    return "translate("+arc.centroid(d)+")"//获取弧中心:内外半径和开始结束角度的极坐标系的中心点
})
.attr("text-anchor","middle")
.text(function(d){
    return d.value;  //这里可以输出查看一下pie(dataset)函数执行后的数据格式,可以知道我们所需要的是它的value值
})


运行结果如下图:

d3.js——绘制饼状图_第1张图片

你可能感兴趣的:(layout,d3,饼状图,圆弧,颜色比例尺)