0

我是 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

这是我的 JSfiddle：

我真的很感激。

4

1 回答 1

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

完整的例子在这里。

于 2013-12-20T21:42:29.507 回答