将D3甜甜圈图从v4更新到v5

Question

我正在将d3.js代码从v4.13.0更新到v5.7.0。

我看不到这种图表类型在版本号之间有什么变化，我感到很困惑。 https://github.com/d3/d3-shape#arcs

我在这里想念什么？

对于此代码段的代码改进方面的任何一般性建议也将受到赞赏。

非常感谢，

奥马利

  $rootScope.drawInfo = (data, parent, status) => {

    const svg = d3.select(parent);
    svg.selectAll("path").remove();
    svg.selectAll("text").remove();

    const backgroundColors = ["#3273dc", "#ff3860", "#ffdd57"];
    let dataTotal = 0;
    const arrWithSum = [0, 0, 0];

    if (data.length === 0) {
      return;
    }

    for (let i = 0; i < data.length; i += 1) {
      dataTotal += 1;
      switch (data[i].opinion) {
        case 0:
          arrWithSum[0] += 1;
          break;
        case 1:
          arrWithSum[1] += 1;
          break;
        case 2:
          arrWithSum[2] += 1;
          break;
      }
    }

    const indexMax = _.indexOf(arrWithSum, _.max(arrWithSum));
    const arcOutMain = d3
      .arc()
      .innerRadius(45)
      .outerRadius(65)
      .startAngle(0)
      .endAngle((2 * Math.PI * arrWithSum[indexMax]) / dataTotal);

    svg
      .append("path")
      .attr("transform", "translate(65,65)")
      .attr("d", arcOutMain)
      .attr("fill", backgroundColors[indexMax]);

    const arcOutGrey = d3
      .arc()
      .innerRadius(45)
      .outerRadius(65)
      .startAngle((2 * Math.PI * arrWithSum[indexMax]) / dataTotal)
      .endAngle(2 * Math.PI);

    svg
      .append("path")
      .attr("transform", "translate(65,65)")
      .attr("d", arcOutGrey)
      .attr("fill", "#f4f5f7");

    const per = ((arrWithSum[indexMax] / dataTotal) * 100).toFixed(0);

    svg
      .append("text")
      .attr("x", 70)
      .attr("y", 70)
      .attr("fill", "#263238")
      .attr("font-size", "1.5em")
      .attr("font-weight", "bold")
      .attr("text-anchor", "middle")
      .attr("font-family", "'Roboto',sans-serif")
      .text(per + "%");
  };