Javascript d3.pie（）创建圆环图时返回1/4的圆

我正在尝试用React和d3.js创建一个甜甜圈图表。我一直在看馅饼和图表上的医生。我正在努力找出我在哪里犯了错误。我有一个对象数组，我使用

  const createPie = d3
    .pie()
    .value(function(d) {return d.cases})

这将返回一个带有

但是，当我尝试在圆弧生成器中使用这些数据时，它只生成圆的四分之一的圆弧。以下代码用于生成圆弧的四分之一

  useEffect(
    () => {
      const data = createPie(pieData);
      console.log('data',data)
      let arcs = data.map( item => {
        let createTry = d3.arc()
          .innerRadius(300)
          .outerRadius(400)
          .startAngle(item.startAngle )
          .endAngle(item.endAngle);

          return createTry(item);
        
      });
      setArcs(arcs);
    }, [pieData]
  )

最后，我尝试将生成的路径映射到svg上。我相信问题源于d3.pie（）

{arcs&&arcs.map（arc=>{
返回(
)
})}

---

如果您能在文档中提供任何有助于我理解错误的帮助或提示，我将不胜感激。谢谢这里还有一个我正在讨论的问题的工作示例，SVG的宽度和高度是400，饼图的半径也是400。因此，只有四分之一的饼是可见的

如果将SVG的大小增加到800（半径x2），并添加一个g元素来包含饼图，饼图将被转换到SVG的中心，那么它将显示出来

例如，更新代码以包括：

return (
    <div>
      <svg height={800} width={800}><g transform="translate(400,400)">
        {arcs &&
          arcs.map(arc => {
            return <path d={arc} />;
          })}
      </g></svg>
    </div>
  );

返回(
{弧&&
arcs.map（arc=>{
返回；
})}
);

SVG的宽度和高度是400，饼图的半径也是400。因此，只有四分之一的饼是可见的

如果将SVG的大小增加到800（半径x2），并添加一个g元素来包含饼图，饼图将被转换到SVG的中心，那么它将显示出来

例如，更新代码以包括：

return (
    <div>
      <svg height={800} width={800}><g transform="translate(400,400)">
        {arcs &&
          arcs.map(arc => {
            return <path d={arc} />;
          })}
      </g></svg>
    </div>
  );

返回(
{弧&&
arcs.map（arc=>{
返回；
})}
);