D3js d3.arc, d3.pie 來個圓餅圖

用途

圓餅圖是常見圖表類型之一，有許多套件也都有此圖，所以不一定要自己做一個，除非遇到特殊需求。

d3.arc

將角度跟半徑設定好之後，d3.arc會協助我們將繪製path圓形的屬性d生成出來，讓我們不用自己寫那痛苦的d屬性。

const arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

也就是說，我們只要提供d3對應的角度跟內外弧度就可以輕鬆畫出圓餅圖了。

d3.pie

可以協助我們將資料轉換為角度，我們在以此結果帶入d3.arc中繪製出path的屬性，就完成圖表了！

範例

const data = [1, 1, 2, 3, 5, 8, 13, 21];
const arcs = d3.pie()(data);

緊接著就可以帶入d3.arc中執行。

const width = 800;
const height = 800;

const svg = d3.select('svg').attr('width', width).attr('height', height);
const rootLayer = svg.append('g');
const pieChartLayer = rootLayer.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`)

// 以上不重要，只是初始畫圖層與置中。

// 產生一園內半徑長50，外半徑長100，的環狀圖
const arc = d3.arc()
      .innerRadius(50)
      .outerRadius(100);

// 資料轉為角度資料
const data = [1, 1, 2, 3, 5, 8, 13, 21];
const arcs = d3.pie()(data);

// 使用`enter`新增`path`元件並設定繪製圖屬性`d`。
pieChartLayer
    .selectAll('path')
    .data(arcs)
    .enter()
    .append('path')
    .attr('d', data => arc(data))
    .attr('stroke', 'white')

結論

輕鬆又常見的圓餅圖完成了！當然還有許多功能要加，可能是hover或是資料參考源都還需要新增上去。

Codepen範例

參考

d3-shape