d3.js - 每个圆弧外的 D3 饼图( donut )图标签

Question

我是 D3 的新手，我有我的圆环图，但是我无法在每个弧线之外获得弧线标签。

我想在 http://bl.ocks.org/Guerino1/2295263 中获得类似紫色标签的东西，但我无法让它在我的圆环图上工作。

我正在使用以下代码附加每个弧的标签，但似乎 arc.centroid 没有按预期工作。

        var arcs = vis.selectAll("g.slice")
    arcs.append("svg:text")
      .attr("transform", function(d, i) { //set the label's origin to the center of the arc
        d.outerRadius = svgOuterRadius + 40; // Set Outer Coordinate
        d.innerRadius = svgOuterRadius + 35; // Set Inner Coordinate
        return "translate(" + arc.centroid(d) + ")";
      })
      .attr("text-anchor", "middle") //center the text on it's origin
      .style("fill", "Purple")
      .style("font", "bold 14px Arial")
      .text(function(d, i) { return 'label'+i; }); //get the label from our original

Here是我的 JSfiddle:

我真的很感激。

Answer 1

基本问题是你的弧path段被翻译，并且您在添加标签时不考虑该翻译。如果您查看链接到的示例，您会看到 path段是在没有任何翻译的情况下添加的，这意味着 text可以在没有额外偏移的情况下添加元素。

要修复只需考虑偏移量:

arcs.append("svg:text")
      .attr("transform", function(d, i) { //set the label's origin to the center of the arc
          var c = arc.centroid(d);
        return "translate(" + (svgWidth/2 + c[0]) + "," + (svgHeight/2 + c[1]) + ")";
})
// etc

完整示例 here .