需要的效果图:
d3全部代码:
<html>
<head>
<meta charset="utf-8">
<title>d3</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 600;
var height = 600;
var dataset = [30 , 10];
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var pie = d3.layout.pie();
var outerRadius = width / 4;
var innerRadius = width / 4;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var text = d3.select('svg')
.append("text")
.text('30%')
.attr("transform","translate("+outerRadius+","+outerRadius+")")
var arcs = svg.selectAll("g")
.data(pie(dataset))
.enter()
.append("g")
.attr("transform","translate("+outerRadius+","+outerRadius+")")
.attr("stroke",function(d,i){
if(i==0){
return "red";
}else{
return "blue";
}
})
.attr("stroke-width","10")
arcs.append("path")
.attr("fill",function(d,i){
if(i==0){
return "white";
}else{
return "blue";
}
})
.attr("d",function(d){
return arc(d);
})
.attr("stroke-dasharray",function(d,i){
if(i==0){
return "5,5";
}else{
return "0,0";
}
});
</script>
</body>
</html>