Javascript 多个甜甜圈图表未显示百分比

我尝试在同一页上显示多个甜甜圈图表。但是它没有显示出来。我正在使用一个循环来创建这个图表，并添加了多个html id来显示这一点

var details = [{category: "Doctor", number: 25}, {category: "Shopping", number: 20}, { category: "Restaurants", number: 10}, {    category: "FastFood", number: 5}, { category: "Internet", number: 8},{ category: "Other", number: 32}];
for (i = 1; i <= 4; i++) 
    chartScript(details, '#custom-chart-' + i);
function chartScript(details, cls) {
    var width = 300,
        height = 500;
    var colors = d3.scaleOrdinal(d3.schemeDark2);
    var svg = d3.select(cls).append("svg")
        .attr("width", width).attr("height", height);
    details.sort(function (a, b) {
        return b['number'] - a['number'];
    });

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

    var segments = d3.arc()
        .innerRadius(80)
        .outerRadius(150)
        .padAngle(.05)
        .padRadius(30);
    var sections = svg.append("g").attr("transform", "translate(150,250)").selectAll("path").data(data);
    sections.enter().append("path").attr("d", segments).attr("fill", function (d) {
        return colors(d.data.number);
    });
    var content = d3.select("g").selectAll("text").data(data);
    content.enter().append("text").classed("inside", true).each(function (d) {
        var center = segments.centroid(d);
        d3.select(this).attr("x", center[0]).attr("y", center[1]).text(d.data.number + '%')
    })
}

var详细信息=[{类别：“医生”，编号：25}，{类别：“购物”，编号：20}，{类别：“餐馆”，编号：10}，{类别：“快餐”，编号：5}，{类别：“互联网”，编号：8}，{类别：“其他”，编号：32}]；
对于（i=1；i您使用的是d3，如下所示

   var sections = svg.append("g").attr("transform", "translate(150,250)")

在这一行

var content = d3.select("g").selectAll("text").data(data);

您应该使用d3而不是d3

var content = sections.select("g").selectAll("text").data(data);

这样，它将选择部分中的所有标记作为经验法则：在D3代码中，不要使用循环（
用于
，
while
，
forEach
等）来附加元素

所以，只要改变那个笨拙的循环，选择合适的D3

var cls = d3.select("body").selectAll(null)
  .data(d3.range(4))
  .enter()
  .append("div");

…您不仅可以解决您提到的问题，还可以避免将来的问题

以下是使用（大部分）代码的演示：


var详细信息=[{
类别：“医生”，
电话：25
}, {
类别：“购物”，
电话：20
}, {
类别:"食肆",，
电话：10
}, {
类别：“快餐”，
电话：5
}, {
类别：“互联网”，
电话：8
}, {
类别：“其他”，
电话：32
}];
变量cls=d3。选择（“主体”）。选择全部（空）
.数据（d3.范围（4））
.输入（）
.附加（“div”）；
可变宽度=180，
高度=180；
var colors=d3.scaleOrdinal（d3.schemeDark2）；
var svg=cls.append（“svg”）
.attr（“宽度”，宽度）.attr（“高度”，高度）；
详细信息。排序（功能（a、b）{
返回b['number']-a['number']；
});
var data=d3.pie（）.sort（null）.value（函数（d）{
返回d.number；
})（详情）；
var段=d3.arc（）
.内半径（45）
.外层（85）
.padAngle（.05）
.焊盘半径（30）；
var g=svg.append（“g”）.attr（“transform”、“translate（90,90）”）；
var sections=g.selectAll（“路径”）.data（数据）；
sections.enter（）.append（“path”）.attr（“d”，段）。attr（“fill”，函数（d）{
返回颜色（d.数据.编号）；
});
var content=g.selectAll（“文本”）.data（数据）；
content.enter（）.append（“text”）.classed（“inside”，true）。每个（函数（d）{
变量中心=段。质心（d）；
d3.选择（this）.attr（“x”，中心[0]）.attr（“y”，中心[1]）.text（d.data.number+'%'））
})
div{
显示：内联块；
}
正文{
文本锚定：中间；
}