D3js创建饼图(svg)

D3饼图

基于D3.js V4.0

先定义好基本数据

// 画布宽高
const width = 400;
const height  = 400;

const  dataset = [ 30 , 10 , 43 , 55 , 13 ] // 数据集
const outerRadius = 150; // 外半径
const innerRadius = 110; // 内半径

将数据集转换为创建饼图需要的数据

const piedata = d3.pie()(dataset); // 数据转换

创建一个颜色选择器

const color = d3.scaleOrdinal(d3.schemeCategory10);

创建圆弧生成器

const arc = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .padAngle(0.02);

通过以上四步就可以开始制作饼图了。
在文档中添加一个画布

cosnt svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('width', height);

制作图形

const arcs = svg.selectAll('g')
      .data(piedata)
      .enter()
      .append('g')
      .attr('transform', 'translate(' + (width / 2) + ',' + (width / 2)+')')

arcs.append('path')
    .attr('fill', (d, i) => {
      return color(i);
    })
    .attr('d', (d) => {
      return arc(d);
    });

添加文本

arcs.append('text')
    .attr('transform', (d) => {
      return 'translate(' + arc.centroid(d) + ')';
    })
    .attr('fill', 'white')
    .attr('text-anchor', 'middle')
    .text((d) => {
      return d.data;
    });