问题描述
这是我的代码:
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,good,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>
如何在扇区之间缩进?就像这张图:
我找到了一个没有渐变的图表解决方案(最后两行),但它不适用于渐变。
解决方法
惯用的 D3 使用 padAngle
:
垫角被转换为分隔相邻圆弧的固定线性距离,定义为 padRadius * padAngle。从弧的起点和终点减去这个距离。
但是,由于您创建渐变的方式很奇怪(使用多个路径),这里我使用阈值比例来比较索引:
.padAngle((_,i) => color2(i) === color2(i + 1) ? 0 : 1)
即便如此,您也会发现以弧度表示的角度不正确。也就是说,我建议您改变方法(每个类别只使用一个路径)。
这是您的更改代码:
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,good,normal,bad
])
.range([greatStartColor,greatEndColor,goodStartColor,goodEndColor,normalStartColor,normalEndColor,badStartColor,badEndColor
])
.interpolate(d3.interpolateRgb);
const color2 = d3.scaleThreshold()
.domain([great,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>
将 .attr("stroke","white")
和 .attr("stoke-width","5px")
添加到弧定义将在弧之间添加缩进扇区(空格)。
g.selectAll("path")
.data(d3.range(0,dblpi / colorSmooth))
.enter()
.append("path")
.attr("d",arc)
.attr("stroke","white")
.attr("stoke-width","5px")
.style("fill",i) {
return color(i);
});
注意:您正在使用多个颜色范围来创建渐变效果,这将导致为每个颜色值生成多个弧线,从而生成此 https://codepen.io/mont8593/pen/mdOBLdd
您可以参考 Adding gradient to 3rd party solid color donut chart 在圆环图中实现渐变。