JSFiddle - React, Tailwind, and code Playground

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.selectAll("g").remove()
        
  var pie = d3.layout.pie()
    .value(function(d){
      return d[1]
    })

  var pieData = pie(dataSet)
  var update = svg.selectAll("g").data(pieData)
  update.call(setAttr)
  var enter = update.enter().append("g").call(setAttr)
  var exit = update.exit()

	svg.transition()
    .duration(500)
    .tween("move", function(){
      return function(t){
      	
        d3.select(this).select("path").attr()
      }
    })
    .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 + ")"
        })
        .attr("text-anchor", "middle")
        .text(function(d){
          return d.data[0]
        })

      // -- 資料標籤的連接線 --   
      g.append("line")
        .attr("stroke",...