Javascript 如何使用d3.js在饼图转换图中显示标签？

我正在使用d3.js的饼图转换图来可视化潜在客户。

---

图形已绘制，但标签不显示在图形上

代码如下：

var w = 400,
h = 400,
r = Math.min(w, h) / 2,
data = [25,45],            // Data values
color = d3.scale.category20(),
arc = d3.svg.arc().outerRadius(r),
donut = d3.layout.pie();

var vis = d3.select("#pie-chart-div").append("svg")  // Place the chart in 'pie-chart-div'
    .data([data])
    .attr("width", w)
    .attr("height", h);

var arcs = vis.selectAll("g.arc")
    .data(donut)
  .enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + r + "," + r + ")");

var paths = arcs.append("path")
    .attr("fill", function(d, i) { return color(i); });

paths.transition()
    .ease("bounce")
    .duration(2000)
    .attrTween("d", tweenPie);

paths.transition()
    .ease("elastic")
    .delay(function(d, i) { return 2000 + i * 50; })
    .duration(750)
    .attrTween("d", tweenDonut);

function tweenPie(b) {
  b.innerRadius = 0;
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
  return function(t) {
    return arc(i(t));
  };
}

function tweenDonut(b) {
  b.innerRadius = r * .6;
  var i = d3.interpolate({innerRadius: 0}, b);
  return function(t) {
    return arc(i(t));
  };
}   

---

< BR> <强>如何在饼状过渡图中显示标签？< /强> < /P> < P>以显示“精确位置”中的文本（我假设它在圆弧中间），可以使用<代码> CythRoDo（）/<代码>函数：

var labels = arcs.append("text")
    .attr("transform", function(d) { 
        d.innerRadius = 120;
        return "translate(" + arc.centroid(d) + ")"; 
    })
    .attr("dy", ".35em")
    .text(function(d) { return d.value; });

查看此演示：

var w=400，
h=400，
r=数学最小值（w，h）/2，
数据=[25,45]，//数据值
颜色=d3.scale.category20（），
arc=d3.svg.arc（）.outerRadius（r），
donut=d3.layout.pie（）；
var vis=d3.select（“body”）.append（“svg”）//将图表放在“饼图div”中
.数据（[数据]）
.attr（“宽度”，w）
.attr（“高度”，h）；
var arcs=vis.selectAll（“g.arc”）
.数据（甜甜圈）
.enter（）.append（“g”）
.attr（“类”、“弧”）
.attr（“转换”、“翻译”（“+r+”，“+r+”））；
变量路径=弧。追加（“路径”）
.attr（“填充”，函数（d，i）{返回颜色（i）；}）；
变量标签=弧。追加（“文本”）
.attr（“transform”，函数（d）{d.innerRadius=120；返回“translate”（+弧形心（d）+”）；}）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.value；}）；
transition（）路径
.轻松（“反弹”）
.期限（2000年）
.attrTween（“d”，tweenPie）；
transition（）路径
.ease（“弹性”）
.delay（函数（d，i）{return 2000+i*50；}）
.持续时间（750）
.attrween（“d”，tweendoot）；
函数tweenPie（b）{
b、 内半径=0；
var i=d3.interpolate（{startAngle:0，endAngle:0}，b）；
返回函数（t）{
返回弧（i（t））；
};
}
功能螺母（b）{
b、 内半径=r*.6；
var i=d3.插值（{innerRadius:0}，b）；
返回函数（t）{
返回弧（i（t））；
};
}

---

“图形已绘制，但标签未显示在图形上”。。。原因很简单：您没有将任何文本元素附加到组中。所以，标签不会自动显示。请尝试此代码。但它不会显示在扇区的确切位置。text（函数（d，i）{返回d.value.toFixed（2）；}）；是的，现在好了。将标签添加到数据时：data=[{“label”：“sector1”，“value”：25}，{“label”：“sector2”，“value”：45}]“NaN”将显示，而不是图表。由于这是另一个问题，请将其作为新问题发布，我将查看它。我发布了一个新问题。请调查一下：