gpt4 book ai didi

javascript - 如何在圆环图中的扇区之间缩进?

转载 作者:行者123 更新时间:2023-12-04 08:03:55 24 4
gpt4 key购买 nike

这是我的代码:

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>

如何在扇区之间进行缩进?就像这张图片:
picture
我找到了一个没有渐变的图表解决方案(最后两行),但它不适用于渐变。

最佳答案

惯用的 D3 正在使用 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.


但是,由于您创建渐变的方式很奇怪(使用多个路径),这里我使用阈值比例来比较索引:
.padAngle((_, i) => color2(i) === color2(i + 1) ? 0 : 1)
即使这样,您也会看到以弧度表示的 Angular 不正确。也就是说,我建议你改变你的方法(每个类别只使用 一个 路径)。
这是带有该更改的代码:

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>

关于javascript - 如何在圆环图中的扇区之间缩进?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66316493/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com