D3饼图扁平而不是圆形

Question

我的D3圆形图正在渲染，但是呈扁平形式，然后是适当的圆形自我，我想不出解决此问题的方法。

我制作了这些组件并将其插入到用于渲染日历的组件中。

点号中的ID为注释样式

更改数据数组中元素的数量将更改部分的数量和颜色，但是该部分不会折叠成圆形，而是会放平。

FullCalander.js

class FullCalendar extends React.Component {
render() {


  return (
  <div>  
      <PieRender data={[5, 20, 6, 67]} />  
      <div id="calendar"></div>
  </div>
  );
}
componentDidMount() {
  $('#calendar').fullCalendar({
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
          },
          editable: true,
          droppable: true, // this allows things to be dropped onto the calendar
          drop: function() {
              // is the "remove after drop" checkbox checked?
              if ($('#drop-remove').is(':checked')) {
                  // if so, remove the element from the "Draggable Events" list
                  $(this).remove();
              }
          }
  })
}

}

export default FullCalendar;

PieRender.js

import React, { Component } from 'react';
import * as d3 from "d3";
import './PieRender.css';



function translate(x, y) {
    return `translate(${x}, ${y})`;
  }

  class Slice extends Component {
    constructor(props) {
      super(props);
      this.state = {isHovered: false};
      this.onMouseOver = this.onMouseOver.bind(this);
      this.onMouseOut = this.onMouseOut.bind(this);
    }

onMouseOver() {
  this.setState({isHovered: true});
}

onMouseOut() {
  this.setState({isHovered: false});
}

render() {
  let {value, label, fill, innerRadius = 0, outerRadius, cornerRadius, padAngle, ...props} = this.props;
  if (this.state.isHovered) {
    outerRadius *= 1.1;
  }
  let arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .cornerRadius(cornerRadius)
    .padAngle(padAngle);
  return (
    <g onMouseOver={this.onMouseOver}
       onMouseOut={this.onMouseOut}
       {...props}>
      <path d={arc(value)} fill={fill} />
      <text transform={translate(...arc.centroid(value))}
            dy=".35em"
            className="label">
        {label}
      </text>
    </g>
  );
}

}

  class Pie extends Component {
    constructor(props) {
      super(props);
      this.colorScale = d3.scale.category10();
      this.renderSlice = this.renderSlice.bind(this);
    }

    render() {
      let {x, y, data} = this.props;
      let pie = d3.layout.pie();
      return (
        <g transform={translate(x, y)}>
          {pie(data).map(this.renderSlice)}
        </g>
      );
    }

renderSlice(value, i) {
  let {innerRadius, outerRadius, cornerRadius, padAngle} = this.props;
  return (
    <Slice key={i}
           innerRadius={innerRadius}
           outerRadius={outerRadius}
           cornerRadius={cornerRadius}
           padAngle={padAngle}
           value={value}
           label={value.data}
           fill={this.colorScale(i)} />
  );
}

}

  class PieRender extends Component {
    render() {
      let width = window.innerWidth;
      let height = window.innerHeight;
      let minViewportSize = Math.min(width, height);
      let radius = (minViewportSize * .9) / 2;
      let x = width / 2;
      let y = height / 2;

  return (
    <div>
      <svg id="chart" width="100%" height="100%">
      <Pie x={x}
           y={y}
           innerRadius={radius * .35}
           outerRadius={radius}
           cornerRadius={7}
           padAngle={.02}
           data={this.props.data} />
    </svg>
    </div>
  );
}

}

  export default PieRender