D3.js + вафельный график + частично заполнить круг / прямоугольник в вафельном графике на основе данных - PullRequest
Новая
       19

D3.js + вафельный график + частично заполнить круг / прямоугольник в вафельном графике на основе данных

0 голосов
/ 03 октября 2018

Я пытаюсь заполнить кружки в вафле частично на основе данных.Это должно показать круги, частично окрашенные.В моем следующем коде я получаю черные круги вместо частично окрашенных кругов.

enter image description here

Путь клипа, который я пытаюсь нарисовать, неправильный или около того.

Любая помощь будет оценена.Заранее спасибо! 

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();
      })
...