前言

2021 年春季台灣發生缺水危機，西半部實施強制節水措施，主要原因是前一年梅雨量減少，再加上沒有颱風，水庫的蓄水量不足，但是又不能只仰賴水庫，需要在水資源的使用上做更好的調配。
所以今天就來畫水資源使用狀況的圓餅圖，先到經濟部水利署下載資料。

2021年臺灣旱災缺水危機

開始畫圖

1. 整理下載的資料，選擇需要的資料，改成 utf8 編碼的 csv 檔案
   
2. 參考 d3 gallery pie chart 引用別人的程式碼
3. 上傳整理過的資料，用 Number() 把 value 轉換成數字，開始畫圖

chart1 = PieChart(taiwan_water_consumption1, {
  name: d => d.供水來源,
  value: d => Number(d.臺灣地區),
  width,
  height: 500
})               

4. 圖型看起來有幾個問題
   • 數值不是百分比
   • 境外引水數值是 0
   • 不需要總供水量
   • 字重疊
   • 字太小
     
5. 解決上述問題
   • 計算每種分類占總供水量的百分比, toFixed() 取到小數點後一位
   • 加上 加上 if 條件式 排除 0, 總供水量，百分比小於 1 的分類
   • 放大 width, height 的值

chart1 = PieChart(taiwan_water_consumption1, {
  name: d => d.供水來源,
  value: d => {
    let final_data = (Number(d.臺灣地區)/ Number(taiwan_water_consumption1[0].臺灣地區) * 100).toFixed(1);
    if (d.臺灣地區 !== "0" && d.臺灣地區 !== "16664.26" && final_data> 1) {
      return final_data
    }
  },
  width,
  height: 700
})

• 修改 font-size 放大字體
• 指定只有百分比加上 %

svg.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 16)
      .attr("text-anchor", "middle")
    .selectAll("text")
    .data(arcs)
    .join("text")
      .attr("transform", d => `translate(${arcLabel.centroid(d)})`)
    .selectAll("tspan")
    .data(d => {
      const lines = `${title(d.data)}`.split(/\n/);
      // return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1);
      return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 2);
    })
    .join("tspan")
      .attr("x", 0)
      .attr("y", (_, i) => `${i * 1.5}em`)
      .attr("font-weight", (_, i) => i ? null : "bold")
      .text((d,i) => i == 0 ? d : d + "%")

6. 成品圖
   

結論

只看區塊顏色，比例接近的很難馬上看出大小，加上數值標示會更清楚。