Разместите легенду D3 js внизу кольцевой диаграммы и в двух столбцах.

Question

Я реализую легенду о пончиковом графике d3, но не смог разместить его снизу и с двумя столбцами

Я использую D3 js с Angular 7

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