布局之饼状图
开始学习布局啦~~
一些新的概念来了,需要慢慢体会~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>布局学习之饼状图</title>
<script type="text/javascript" src="../d3/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//布局是为了得到所绘图形所需要的数据
var width = 400,
height = 600;
var dataset = [30, 10, 43, 55, 13];
var svg = d3.select("body")
.append("svg")
.attr("height", height)
.attr("width", width);
var pie = d3.layout.pie();
//定义一个布局,返回值赋给变量pie
//之后,pie可以作为一个函数来使用
var piedata = pie(dataset);
//将数据转换成饼状图所需要的形式
var outerRadius = 150;//外半径
var innerRadius = 0;//内半径,是0,表示中间没有留白
var arc = d3.svg.arc()//生成了一个弧生成器
.innerRadius(innerRadius)//设置内半径
.outerRadius(outerRadius);//设置外半径
var coler = d3.scale.category10();//生成不同颜色
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
//arcs包含了5个元素,为每一个个元素添加路径
//自己想的:transform将原点移到了圆心的位置
arcs.append("path")
.attr("fill", function (d, i) {return coler(i);})
.attr("d", function (d) {return arc(d);});
//d是路径的属性
arcs.append("text")
.attr("transform", function (d) {return "translate(" + arc.centroid(d) + ")";})
.attr("text-anchor", "middle")
.text(function (d) {return d.data;})
.attr("fill", "white");
//arc.centroid(d) 能算出弧线的中心,
//在弧线中心添加文本
//注意,经过弧生成器之后,d是一个对象,包含很多元素
//包括角度等等
//这里返回的是对象中的数据
</script>
</body>
</html>