How to use the d3-shape.pie function in d3-shape

.attr("transform", `translate(${radius + Configuration.pie.paddingLeft},${radius})`)
			.attr("width", `${diameter}px`)
			.attr("height", `${diameter}px`)
			.attr("preserveAspectRatio", "xMinYMin");

		// Compute the correct inner & outer radius
		const marginedRadius = this.computeRadius();
		this.arc = arc()
			.innerRadius(this.options.type === "donut" ? (marginedRadius * (3 / 4)) : 2)
			.outerRadius(marginedRadius);

		this.hoverArc = arc()
			.innerRadius(this.options.type === "donut" ? (marginedRadius * (3 / 4)) : 2)
			.outerRadius(marginedRadius + 3);

		this.pie = pie()
			.value((d: any) => d.value)
			.sort(null)
			.padAngle(0.007);

		// Draw the slices
		this.path = this.innerWrap.selectAll("path")
			.data(this.pie(dataList))
			.enter()
			.append("path")
			.attr("d", this.arc)
			.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value)) // Support multiple datasets
			.each(function (d) { this._current = d; });

		// Draw the slice labels
		const self = this;
		this.innerWrap

drawFromObject() {
    this.initRoughObjects();

    this.makePie = pie();

    this.makeArc = arc()
      .innerRadius(0)
      .outerRadius(this.radius);

    this.arcs = this.makePie(this.data[this.values]);

    this.arcs.forEach((d, i) => {
      if (d.value !== 0) {
        const node = this.rc.arc(
          this.width / 2, // x
          this.height / 2, // y
          2 * this.radius, // width
          2 * this.radius, // height
          d.startAngle - Math.PI / 2, // start
          d.endAngle - Math.PI / 2, // stop

const that = this
    var radius = this.props.radius || Math.min(width - 100, height - 100) / 2;
    var outerRadius = outerRadius || (radius - 10)
    var labelr = radius + 10;

    var chartSeriesData = this.mkSeries();

    var arc = D3Shape.arc()
      .outerRadius(outerRadius)
      .innerRadius(innerRadius);

    var arcOver = D3Shape.arc()
      .outerRadius(outerRadius + 10)
      .innerRadius(innerRadius);

    var pie = D3Shape.pie()
      .sort((a, b) => { return pieSort(a.value, b.value)})
      .value((d) => { return d.value; })

    return (

drawFromFile() {
    this.initRoughObjects();

    this.makePie = pie()
      .value(d => d[this.values])
      .sort(null);

    const valueArr = [];
    this.makeArc = arc()
      .innerRadius(0)
      .outerRadius(this.radius);

    this.arcs = this.makePie(this.data);

    this.arcs.forEach((d, i) => {
      if (d.value !== 0) {
        const node = this.rc.arc(
          this.width / 2, // x
          this.height / 2, // y
          2 * this.radius, // width

export const layout = (valueAccessor: Accessor, angleRange: [number, number]): Pie => {
  return d3Pie()
    .sort(null)
    .value(valueAccessor)
    .startAngle(angleRange[0])
    .endAngle(angleRange[1])
}

pie: computed('padDegrees', function() {
    return pie()
      .padAngle(get(this, 'padDegrees') / 360)
      .value((d) => d[1]);
  }),

update(): void {
    const pieGenerator = pie()
      .value(d => d.value)
      .sort(null);

    const arcData = pieGenerator(this.series);

    this.max = max(arcData, d => {
      return d.value;
    });

    this.data = this.calculateLabelPositions(arcData);
    this.tooltipText = this.tooltipText || this.defaultTooltipText;
  }

private initSvg() {
        this.svg = d3.select('svg');

        this.width = +this.svg.attr('width');
        this.height = +this.svg.attr('height');
        this.radius = Math.min(this.width, this.height) / 2;

        this.color = d3Scale.scaleOrdinal()
            .range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00']);

        this.arc = d3Shape.arc()
            .outerRadius(this.radius - 10)
            .innerRadius(this.radius - 70);

        this.pie = d3Shape.pie()
            .sort(null)
            .value((d: any) => d.population);

        this.svg = d3.select('svg')
            .append('g')
            .attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')');
    }

initialize(options) {
        this.options = options;
        this.model = this.options.model;
        this.showLegend = this.options ?  this.options.showLegend || false : false;

        this.arc = arc();
        this.pie = pie().sort(null).value(d => d.value);
        this.tooltip = new TooltipView({position: 'center'});
        this.getChartData();
    }

import './PieChart.css';

const size = 500;
const radius = size / 2;

const dataArc = arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

const labelArc = arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);

const colour = scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

const pieChart = pie()
  .sort(null)
  .value(d => d.value);

const PieChart = ({ data, width, height }) => {
  return (
    <svg viewBox="{`0" height="{height}" width="{width}">
      <g transform="{`translate(${radius},">
        {pieChart(data).map((d, i) =&gt; (
          <g>
            </g></g></svg>