Donut chart d3 js Как сделать отступы между секторами?

codepen

const innerRadius = 40;
const colorSmooth = 300; //smooth transition of colors (resolution)
const innerText = "Chart";

// values in perсents
var percentsGreat  = 50;
var percentsGood   = 20;
var percentsNormal = 20;
var percentsBad    = 10;

// "start", "end" arcs colors pair per value
var greatStartColor  = "#FFE39C";
var greatEndColor    = "#FFBA9C";
var goodStartColor   = "#6FCF97"; 
var goodEndColor     = "#66D2EA";
var normalStartColor = "#BC9CFF"; 
var normalEndColor   = "#8BA4F9";
var badStartColor    = "#919191"; 
var badEndColor      = "#3D4975";


// оределяем рабочую область и устанавливаем начало координат в ее центр
var  svg =  d3.select("svg"),
   width = svg.attr("width"),
  height = svg.attr("height"),
       g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var radius = d3.min([width, height]) / 2;

var arc = d3.arc()
  .innerRadius(radius - innerRadius)
  .outerRadius(radius)
  .startAngle(function(d) {
    return d;
  })
  .endAngle(function(d) {
    return d + dblpi / colorSmooth * 1.2;
  }); // 1.2 это чтоб артефакты на переходах перекрыть

var great  = colorSmooth / 100 * percentsGreat;
var good   = colorSmooth / 100 * percentsGood   + great;
var normal = colorSmooth / 100 * percentsNormal + good;
var bad    = colorSmooth / 100 * percentsBad    + normal;

var dblpi = 2 * Math.PI;

var color = d3.scaleLinear()
  .domain([0,     great,
           great, good,
           good,  normal,
           normal,bad])
  .range([greatStartColor,  greatEndColor, 
          goodStartColor,   goodEndColor, 
          normalStartColor, normalEndColor, 
          badStartColor,    badEndColor])
  .interpolate(d3.interpolateRgb)

g.selectAll("path")
  .data(d3.range(0, dblpi, dblpi / colorSmooth))
  .enter()
  .append("path")
  .attr("d", arc)
  .style("fill", function(d, i) {
    return color(i);
  });

g.append("text")
   .attr("class", "percent-score")
   .attr("dy", ".35em") // выравниваем текст по центру диаграммы
   .attr("text-anchor", "middle")
   .text(innerText);

// svg.attr("stroke", "white")
//  .style("stroke-width", "2px");

Такие

отступы


Ответы (0 шт):