将圆环图旋转到所选切片的中间

Question

我想旋转我的甜甜圈/饼图，使所选切片的中间位于顶部的中心。用变换(旋转(旋转图表很简单，问题是，如何找到旋转角度，使切片位于顶部的中心。非常感谢。

目前，我通过以下方式选择切片：

slice.on('click', function(d){
console.log(d);
//etc //etc
})

Answer 1

以这个例子为基础，当你点击一个甜甜圈时，它会移动到顶部。记住要从弧度转换为度数！

const pie = d3.pie()
.padAngle(0.005)
.sort(null)
.value(d => d.value);
const height = 400,
width = 600;
const radius = Math.min(width, height) / 2
const arc = d3.arc()
.innerRadius(radius * 0.67)
.outerRadius(radius - 1);
const svg = d3.select('svg')
.attr('height', height)
.attr('width', width)
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const g = svg.append('g');
d3.csv("https://static.observableusercontent.com/files/bee673b386dd058ab8d2cf353acbedc6aa01ebd1e6f63e2a9ab1b4273c7e6efd1eeea526345e4be7f0012d5db3ec743ef39ad9e6a043c196670bf9658cb02e79?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27population-by-age.csv").then(data => {
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0, 1), data.length).reverse());
const arcs = pie(data);
const slice = g
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc);
slice
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
slice.on("click", (event, d) => {
const centerAngle = (d.endAngle - d.startAngle) / 2 + d.startAngle;
g.transition()
.duration(500)
.attr('transform', `rotate(-${centerAngle / (2 * Math.PI) * 360})`);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg></svg>