chart = {
const height = Math.min(500, width / 2);
const outerRadius = height / 2 - 10;
const middleRadius = outerRadius * 0.75; // 两个环形之间的分隔半径
const innerRadius = outerRadius * 0.5; // 最内层的半径
const tau = 2 * Math.PI;
const color = d3.scaleOrdinal(d3.schemeObservable10);
const svg = d3.create("svg")
.attr("viewBox", [-width/2, -height/2, width, height]);
// 创建两个不同的弧形生成器
const outerArc = d3.arc()
.innerRadius(middleRadius)
.outerRadius(outerRadius);
const innerArc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(middleRadius - 10);
const pie = d3.pie().sort(null).value((d) => d["apples"]);
// 绘制外环
const outerPath = svg.datum(data).selectAll(".outer-path")
.data(pie)
.join("path")
.attr("class", "outer-path")
.attr("fill", (d, i) => color(i))
.attr("d", outerArc)
.each(function(d) { this._current = d; });
// 绘制内环
const innerPath = svg.datum(data).selectAll(".inner-path")
.data(pie)
.join("path")
.attr("class", "inner-path")
.attr("fill", (d, i) => color(i + data.length)) // 使用不同的颜色
.attr("d", innerArc)
.each(function(d) { this._current = d; });
function change(value) {
pie.value((d) => d[value]); // change the value function
// 更新外环
outerPath
.data(pie)
.transition()
.duration(750)
.attrTween("d", arcTween(outerArc));
// 更新内环
innerPath
.data(pie)
.transition()
.duration(750)
.attrTween("d", arcTween(innerArc));
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(arc) {
return function(a) {
const i = d3.interpolate(this._current, a);
this._current = i(0);
return (t) => arc(i(t));
};
}
// Return the svg node to be displayed.
return Object.assign(svg.node(), {change});
}
data = d3.tsvParse(`apples oranges
53245 200
28479 200
19697 200
24037 200
40245 200`, d3.autoType)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
