如何在饼图之外添加标签

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

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

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

// 创建饼图布局
const pie = d3.pie();

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

// 绘制饼图
const g = svg.append("g")
    .attr("transform", "translate(250, 250)");

g.selectAll(".arc")
    .data(pie(data))
    .enter().append("path")
    .attr("class", "arc")
    .attr("d", arc)
    .style("fill", (d, i) => d3.schemeCategory10[i]);

// 添加外部标签
g.selectAll(".label")
    .data(pie(data))
    .enter().append("text")
    .attr("class", "label")
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .attr("dy", ".35em")
    .text(d => `${d.data} (${(d.data/data.reduce((a,b)=>a+b,0)*100).toFixed(1)}%)`);