Donut chart d3 js Как сделать отступы между секторами?
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");
Такие
