从顶部开始的颤动饼图

// 引入D3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>

// 创建SVG容器
var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

// 数据
var data = [10, 20, 30, 40];

// 创建饼图布局
var pie = d3.pie()
    .value(function(d) { return d; });

// 创建弧生成器
var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(200);

// 绘制饼图
var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .attr("fill", function(d, i) { return d3.schemeCategory10[i]; });

// 添加颤动效果
function vibrate() {
    g.select("path")
        .transition()
        .duration(100)
        .attrTween("transform", function(d) {
            var angle = Math.random() * 2 * Math.PI;
            return function(t) {
                return "rotate(" + (d.startAngle + angle * t) + ")";
            };
        })
        .transition()
        .duration(100)
        .attrTween("transform", function(d) {
            return function(t) {
                return "rotate(" + d.startAngle + ")";
            };
        });
}

setInterval(vibrate, 200);