Создайте круговую (круговую) сгруппированную гистограмму с помощью d3. js

Question

Я пытаюсь создать радиальную (круговую) сгруппированную гистограмму с d3. js, что-то вроде , что . Для этого я начал с трех примеров:

• Столбчатая диаграмма с радиальной структурой ;
• Сгруппированный столбец Диаграмма ;
• Гистограмма ;

Чтобы упростить задачу, я использую те же данные из первого примера и удалила метки и ось Я оставил только функцию весов и генератор ar c. Я думаю, что я не далеко от окончательного решения, но я не могу понять, что я упускаю / делаю неправильно, но я думаю, что это может быть функция х0 или перевод каждого бара в той же группе. Как видите, ни один столбец или группа не расположены правильно.

Я готовлю пример здесь .

Какой-то код здесь:

X scale Функция для позиционирования каждой группы:

x0 = d3.scaleBand()
    .domain(data.map(d => d.State))
    .range([0, 2 * Math.PI])
    .align(0)

Функция шкалы X, для позиционирования каждого стержня в группе:

x1 = d3.scaleBand()
    .domain(keys)
    .range([0, x0.bandwidth()])
    .align(0)

Функция шкалы Y, для позиционирования высоты стержня:

y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.total)])
  .range([innerRadius, outerRadius]);

Ar c генератор:

arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius((d) => y(d.value))
    .startAngle(d => x1(d.key))
    .endAngle(d => x1(d.key) + x1.bandwidth())
    .padAngle(0.01)
    .padRadius(innerRadius)

Главная цепь:

svg.append("g")
    .selectAll("g")
    .data(data)
    .join("g")
      .attr("transform", d => `translate(${x0(d[groupKey])},0)`)
    .selectAll("path")
    .data(d => keys.map(key => ({key, value: d[key]})))
    .join("path")
      .attr('fill', '#69b3a2')
      .attr("d", arc);