Search code examples
javascriptsvgd3.jsdonut-chart

How to make indents between sectors in donut chart?

This is my code:

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


// define the workspace and set the origin to its center
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 to block artifacts on the transitions

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") // align the text to the center of the chart
  .attr("text-anchor", "middle")
  .text(innerText);

// svg.attr("stroke", "white")
//  .style("stroke-width", "2px");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="400"></svg>

How to make indents between sectors? Like in this picture:

picture

I found a solution for chart without gradients (the last two lines) but it doesn't work with gradients.

Solution

  • The idiomatic D3 for that is using padAngle:

    The pad angle is converted to a fixed linear distance separating adjacent arcs, defined as padRadius * padAngle. This distance is subtracted equally from the start and end of the arc.

    However, due to the strange way you're creating the gradient (using several paths), here I'm using a threshold scale for comparing the indices:

    .padAngle((_, i) => color2(i) === color2(i + 1) ? 0 : 1)

    Even with that, you'll see that the angle in radians is not correct. That said, I suggest you change your approach (use just one path per category).

    Here is your code with that change:

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


// define the workspace and set the origin to its center
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)
  .padAngle((_, i) => color2(i) === color2(i + 1) ? 0 : 1)
  .startAngle(function(d) {
    return d;
  })
  .endAngle(function(d) {
    return d + dblpi / colorSmooth * 1.2;
  }); // 1.2 to block artifacts on the transitions

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

const color2 = d3.scaleThreshold()
  .domain([great, good, normal, normal, bad])
  .range(d3.range(6));

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") // align the text to the center of the chart
  .attr("text-anchor", "middle")
  .text(innerText);

// svg.attr("stroke", "white")
//  .style("stroke-width", "2px");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="400"></svg>