我用javascript做了一个piechart，现在我想把它放到一个react组件中。但是，它只画了一个切片，而且那个切片甚至还没有完成，它被切断了。下面是从react组件中切下的切片的图片，以及它在html中的渲染效果。

我不知道为什么。
这是我的函数绘制它：

function drawDonut(inputData: DealNumbers[]) {
const radius = Math.min(width, height) / 2;

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

const arc = d3.arc()
  .outerRadius(radius - margin.top)
  .innerRadius(radius - radius * 0.5);

const pie = d3
  .pie()
  .padAngle(0)
  .value((d) => d.deals);

svg
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', `translate(${(width / 2) + margin.left}, ${(height / 2) + margin.top})`);

svg
  .selectAll('.arc')
  .data(pie(inputData))
  .enter()
  .append('g')
  .attr('class', 'arc')
  .append('path')
  .attr('d', arc)
  .style('fill', (d) => color(d.data.name));

除了我使用了svg view box，并将width和height作为道具传递而不是硬编码之外，它几乎是相同的。它从javascript中提取得很好。
感谢任何提示和技巧，你是能够和花时间给予！
顺祝商祺！
奥利弗