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")
 }