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

【问题标题】：d3.pie() returning 1/4 of a circle when creating a donut chartd3.pie() 创建圆环图时返回圆的 1/4
【发布时间】：2020-06-27 17:13:24
【问题描述】：

我正在尝试使用 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]
  )

最后我尝试将生成的路径映射到 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

【问题讨论】：

标签： javascript reactjs d3.js

【解决方案1】：

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

如果你将 SVG 的大小增加到 800（半径 x 2），并添加一个 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>
  );

【讨论】：