我尝试在同一页面上显示多个圆环图。但它没有显示。我正在使用循环来创建此图表并添加多个 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 + '%')
})
}
最佳答案
你正在像这样使用 d3
var sections = svg.append("g").attr("transform", "translate(150,250)")
在这一行
var content = d3.select("g").selectAll("text").data(data);
您应该使用
而不是 d3var content = sections.select("g").selectAll("text").data(data);
这样它将选择所有 <g>
部分中的标签
关于javascript - 多个圆环图不显示百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59728380/