尝试使用d3.js创建曲线内带有标签的圆环图

<script src="path/to/d3.js"></script>

<svg id="chart" width="500" height="500"></svg>

var data = [
  { label: "标签1", value: 30 },
  { label: "标签2", value: 50 },
  { label: "标签3", value: 20 }
];

var svg = d3.select("#chart"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var color = d3.scaleOrdinal(["#f1c40f", "#e74c3c", "#3498db"]);

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var arc = g.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

arc.append("path")
    .attr("d", path)
    .attr("fill", function(d) { return color(d.data.label); });

arc.append("text")
    .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
    .attr("dy", "0.35em")
    .text(function(d) { return d.data.label; });

arc.on("mouseover", function(d) {
    d3.select(this).attr("opacity", 0.7);
})
.on("mouseout", function(d) {
    d3.select(this).attr("opacity", 1);
})
.on("click", function(d) {
    // 处理点击事件
});