index.html(图表页面)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container"></div>
</body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="index.js"></script>
</html>
index.js(JS代码)
var data = [0,34.45,45.534,556,76,87,234,234]
pieChart(data,"#container") //D3生成饼状图表
/*** @desc 饼状图
*/
function pieChart(data, container) {
var width = 500,
height = 400
//添加svg元素，设置宽度和高度
var svg = d3.select(container)
.append("svg")
.attr("width", width)
.attr("height", height)
//在svg下添加g元素
var g = svg.append("g")
.attr("class", "pie-g")
.attr("transform", "translate(200,200)")
//生成d的属性值
var arc_generator = d3.svg.arc()
.innerRadius("0")
.outerRadius("200")
//生成角度数据
var angle_data = d3.layout.pie()
.value(function(d){ return d; })
//设置颜色
var color = d3.scale.category10()
//添加path元素，传入角度数据，设置d属性
g.selectAll("path")
.data(angle_data(data))
.enter()
.append("path")
.attr("d", arc_generator)
.style("fill", function(d,i){ return color(i); })
//添加文字
g.selectAll("text")
.data(angle_data(data))
.enter()
.append("text")
.text(function(d,i){ return i; })
.attr("transform", function(d){ return "translate("+arc_generator.centroid(d)+")"; })
.attr("text-anchor", "middle")
}
版权声明：本文为luomao2012原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。