pie charthaha

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
	<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
<script type="text/javascript">
// Your beautiful D3 code will go here
var width = 700;  //画布的宽度
var height = 700;   //画布的高度

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度
//生成饼状图数据
  
d3.csv("file1.csv",function(csvdata) {  
var dataset = [];
 for (var i = 0; i < csvdata.length - 3; i++) {
    dataset.push(csvdata[i].Months_worked)
}   
var pie = d3.pie();
var piedata = pie(dataset);
//生成弧度
var outerRadius = 200; //外半径
var innerRadius = 0; //内半径，为0则中间没有空白
var arc = d3.arc()  //弧生成器
    .innerRadius(innerRadius)   //设置内半径
    .outerRadius(outerRadius);  //设置外半径
var color = d3.schemeCategory10
var arcs = svg.selectAll("g")
    .data(piedata)
    .enter()
    .append("g")
    .attr("transform","translate("+ (width/2) +","+ (width/2) +")");

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){
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.data;
    });
var legend = svg.selectAll(".legend")
      .data(piedata)
    	.enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) {       return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i) { 				return color[i]; 
      });

legend.append("text")
      .attr("x", width-24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d,i) { if(i <  csvdata.length - 3) return csvdata[i].Highest_level_completed; });
  
});
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js