d3.pie() 创建圆环图时返回圆的 1/4

Question

我正在尝试使用 React 和 d3.js 创建一个圆环图。 我一直在查看有关饼图和图表的文档https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_startAngle 。 我正在努力弄清楚我在哪里犯了错误。 我有一个对象数组，我正在使用

  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]
  )

最后，我尝试将生成的路径 map 生成到 svg 上。 我相信问题源于 d3.pie()

<div>
  <svg height={400} width={400}>    
    {arcs && arcs.map( arc => {
      return(
        <path d={arc}/>
      )
    })}
  </svg>
</div>

任何帮助或指向文档中可能帮助我理解我的错误的地方将不胜感激。 谢谢。 这也是我遇到的问题的一个工作示例https://codesandbox.io/s/react-d3js-example-f4ylk?file=/src/components/Chart.js

Answer 1

SVG 的宽度和高度都是 400，而你的饼图的半径也是 400。 所以只有四分之一的饼是可见的。

如果您将 SVG 的大小增加到 800（半径 x 2），并添加 ag 元素以包含您的饼图，该饼图被转换为 SVG 的中心，然后它将显示。

例如，更新您的代码以包括：

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