d3 arc (圓餅圖)

d3 arc (圓餅圖)

by Shang-De You

JavaScript

var width = 400
var height = 400

var svg = d3.select("body").append("svg")
	.attr("width",width)
  .attr("height",height)
  
var dataSet = [
	{ startAngle: 0, endAngle: Math.PI * 0.6 },
  { startAngle: Math.PI * 0.6, endAngle: Math.PI},
  { startAngle: Math.PI, endAngle: Math.PI * 1.7},
  { startAngle: Math.PI * 1.7, endAngle: Math.PI * 2}
]
  
  

var arcPath = d3.svg.arc()
	.innerRadius(0)
  .outerRadius(100)
  
//var color = d3.scale.category10()
var colorArr = ["#587791","#81a7a6","#efc57f","#de6868"]
  
svg.selectAll("path")
	.data(dataSet)
  .enter()
  .append("path")
	.attr("d", function(d){ return arcPath(d) })
  .attr("transform", "translate(250,250)")
  .attr("stroke", "black")
  .attr("stroke-width", "1px")
  .attr("fill", function(d,i){
  	return colorArr[i]
  })
  
  
  // 文字
  svg.selectAll("text")
  	.data(dataSet)
    .enter()
    .append("text")
    .attr("transform", function(d){
    	return "translate(250,250)" + "translate(" + arcPath.centroid(d) + ")"
    })
    .attr("text-anchor", "middle")
    .attr("fill", "whites")
    .attr("font-size", "18px")
    .text(function(d){
    	return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + "°"
    })