D3.js +华夫饼图+根据数据部分填充华夫饼图中的圆形/矩形

Question

我正在尝试根据数据部分填充华夫饼中的圆圈。它应该显示出部分彩色的圆圈。通过下面的代码，我得到的是黑色圆圈，而不是部分彩色的圆圈。

我要绘制的剪切路径不正确。

任何帮助将不胜感激。 预先谢谢你！

const waffle = d3.select(waffleDiv)
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .selectAll('div')
      .data(theData)
      .enter()
      .append('rect')
      .attr('width', squareSize)
      .attr('height', squareSize)
      .attr('rx', (squareSize / 2))
      .attr('ry', (squareSize / 2))
      .attr('fill', function (d, i) {
        const len = theData.length;
        const current = theData[i];
        // const previous = theData[(i + len - 1) % len];
        const next = theData[(i + 1) % len];

        if (i < theData.length) {
          if (current.groupIndex !== next.groupIndex) {
            if (d.lastUnitValue < 100) {
              const currentCircle = d3.select(this);
              // currentCircle.attr('fill', color(d.groupIndex));
              const svgEle = d3.select('svg');
              const cpath = svgEle.append('clipPath')
                .attr('id', 'circle-clip');
              cpath.append('rect')
                .attr('width', squareSize)
                .attr('height', squareSize)
                .attr('rx', (squareSize / 2))
                .attr('ry', (squareSize / 2));
                // .attr('fill', color(d.groupIndex));
              currentCircle.append('rect')
                .attr('width', squareSize)
                .attr('height', squareSize - ((squareSize * d.lastUnitValue) / 100))
                .attr('rx', (squareSize / 2))
                .attr('ry', (squareSize / 2))
                .attr('clip-path', 'url(#circle-clip)')
                .attr('fill', 'white');
            }
          } else {
            return color(d.groupIndex);
          }
        }
      })
      .attr('x', function (d, i) {
        // group n squares for column
        const col = Math.floor(i / heightSquares);
        return (col * squareSize) + (col * gap);
      })
      .attr('y', function (d, i) {
        const row = i % heightSquares;
        return ((heightSquares * squareSize) - ((row * squareSize) + (row * gap)) - 5);
      })
      .attr('stroke', 'lightgray')
      .attr('stroke-width', 1)
      .append('title')
      .text(function (d, i) {
        // return 'Total members: ' + d.ageGroup + ' | ' + d.value + ' , ' + (d.units / theData.length) * 100 + '%';
        return 'Members count: ' + d.categories + ' | ' + d.actualValue.toLocaleString();
      })