d3 圓餅圖 (2)

d3 圓餅圖 (2)

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 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)]

// -- 圓餅圖 -- 
draw()
function draw(){
	d3.transition()
    .duration(500)
    .tween("move", function(){
      return function(t){
      	
      	var pie = d3.layout.pie()
          .startAngle(0)
          .endAngle(Math.PI * t * 2)
          .value(function(d){
            return d[1]
          })

        var pieData = pie(dataSet)
        var update = svg.selectAll("g").data(pieData)
        update
        	.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")")
    			.select("path")
        	.call(setAttr)
        var enter = update.enter()
        	.append("g")
    			.append("path")
          .call(setAttr)
        var exit = update.exit()
      }
    })
    .each("end", function(d){
    	var g = svg.selectAll("g")
      
      // -- 數字 -- 
      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) + "%"
        })

      // -- 資料標籤 -- 
      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 + ")"
       ...