您的位置：首页 > Web前端 > JavaScript

d3.js——绘制饼状图

2016-04-25 15:25 781 查看

<!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值
})

运行结果如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航