我想知道如何在d3.js甜甜圈图表中创建etc组

<script src="https://d3js.org/d3.v7.min.js"></script>

<svg id="chart"></svg>

var width = 500; // 图表宽度
var height = 500; // 图表高度
var radius = Math.min(width, height) / 2; // 半径
var innerRadius = radius * 0.5; // 内半径

var svg = d3.select("#chart")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var pie = d3.pie()
  .sort(null)
  .value(function(d) { return d.value; });

var path = d3.arc()
  .outerRadius(radius)
  .innerRadius(innerRadius);

var data = [
  { name: "Category 1", value: 30 },
  { name: "Category 2", value: 50 },
  { name: "Category 3", value: 20 }
];

var arc = svg.selectAll(".arc")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "arc");

arc.append("path")
  .attr("d", path)
  .attr("fill", function(d) { return d.data.color; });

arc.append("text")
  .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
  .attr("dy", "0.35em")
  .text(function(d) { return d.data.name; });

.arc path {
  stroke: #fff;
}

.arc text {
  text-anchor: middle;
  font-size: 12px;
}

var data = [
  { name: "Category 1", value: 30, color: "#ff0000" },
  { name: "Category 2", value: 50, color: "#00ff00" },
  { name: "Category 3", value: 20, color: "#0000ff" }
];