D3 круговая (кольцевая) метка диаграммы вне каждой дуги

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

Вот мой 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

Полный пример здесь.