d3js畫的圓餅圖 #2 畫出圓餅圖

Winsome on 2020-04-05 Sun

d3.arc()

d3.arc()

const arcTestGenerator = d3
  .arc<any>()
  .innerRadius(0)
  .outerRadius(180)
  .startAngle(0)
  .endAngle(Math.PI / 2)

pieChartGroup
  .append("path")
  .attr("class", "test-path")
  .attr("d", arcTestGenerator)

d3.pie()

d3.pie()

const data2 = [50, 50]
const arcs = d3.pie()(data2)
console.log("arcs", arcs)

transform

d3.arc需要把圓心放到中間畫

.attr("transform", `translate(${width / 2},${height / 2})`)

d3-scale-chromatic

取得一些預設的顏色組合 d3-scale-chromatic