将D3 js图例放在甜甜圈图的底部和两列中

Question

我正在实现d3甜甜圈图的图例，但无法将其放置在底部并有两列

我在Angular 7中使用D3 js

var legend = svg
.selectAll(".legend")
      .data(color.domain())
      .enter()
      .append("g")
      .attr("class", "legend")
    .attr("transform", (d, i) => {
      var height = legendItemSize + legendSpacing;
      var offset = (height * color.domain().length) / 2;
      var x = legendItemSize * -2;
      var y = i * height - offset;
      return `translate(${x}, ${y})`;
    });

// Create rectangle color box
    legend
      .append("rect")
      .attr("width", legendItemSize)
      .attr("height", legendItemSize)
      .style("fill", color);

// Append text according to color
    legend
      .append("text")
      .attr("class", "legend-text")
      .attr("x", legendItemSize + legendSpacing)
      .attr("y", legendItemSize - legendSpacing)
      .text((d: any) => d);