d3 圓餅圖

d3 圓餅圖

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 = [["小米", 60.8], ["三星", 58.4], ["聯想", 47.3], ["蘋果", 46.6], ["華為", 41.3], ["酷派", 40.1], ["其他", 111.5]]

//var emptyDataSet = [["小米", 0], ["三星", 0], ["聯想", 0], ["蘋果", 0], ["華為", 0], ["酷派", 0], ["其他", 0]]

var pie = d3.layout.pie()/* 
  .startAngle(0)
  .endAngle(Math.PI * 0.5) */
	.value(function(d){
  	return d[1]
  })
  
var pieData = pie(dataSet)
/* 
console.log(pieData) */

var outerRadius = width / 3
var innerRadius = 0

var arc = d3.svg.arc()
	.innerRadius(innerRadius)
  .outerRadius(outerRadius)
  
//var color = d3.scale.category20()
var color = [d3.rgb(214, 39, 40), d3.rgb(31, 119, 180), d3.rgb(174, 199, 232), d3.rgb(255, 127, 14), d3.rgb(255, 187, 120), d3.rgb(44, 160, 44), d3.rgb(152, 223, 138)]

// -- 圓餅圖 -- 
var arcs = svg.selectAll("g")
	.data(pieData)
  .enter()
  .call(draw)
  
console.log(arcs)

console.log(svg.selectAll("g"))

// -- 數字 -- 
svg.selectAll("g").append("text")
	.attr("transform", function(d){
  	var x = arc.centroid(d)[0] * 1.4
    var y = arc.centroid(d)[1] * 1.4
    return "translate(" + x + "," + y+ ")"
  })
  .attr("text-anchor", "middle")
  .text(function(d){
  	var percent = Number(d.value) / d3.sum(dataSet, function(d){ return d[1] }) * 100
    return percent.toFixed(1) + "%"
  })
  
// -- 標題 -- 
svg.selectAll("g").append("text")
  .attr("transform", function(d){
    var x = arc.centroid(d)[0] * 2.5
    var y = arc.centroid(d)[1] * 2.5
    return "translate(" + x + "," + y + ")"
  })
  .attr("text-anchor", "middle")
  .text(function(d){
    return d.data[0]
  })
  
// -- 標題的連接線 --   
svg.selectAll("g").append("line")
  .attr("stroke", "black")
  .attr("x1", function(d){ return arc.centroid(d)[0] * 2 })
  .attr("x2", function(d){ return arc.centroid(d)[0] * 2.2 })
  .attr("y1", function(d){ return arc.centroid(d)[1] * 2 })
  .attr("y2", function(d){ return arc.centroid(d)[1] * 2.2 }) 

function...