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")
}
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)