Built with blockbuilder.org
xxxxxxxxxx
<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