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

Я новичок в 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:

Я очень ценю это заранее.


d3.js label donut-chart
person user2975436    schedule 20.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Основная проблема заключается в том, что сегменты вашей дуги 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

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

person Lars Kotthoff    schedule 20.12.2013
comment
Большое спасибо, выглядит великолепно. Могу я спросить вас еще об одном? Я хотел, чтобы каждая метка находилась за пределами каждой дуги, но добавляю d.outerRadius = ‹мой внешний радиус› + 50; d.innerRadius = ‹мой внешний радиус› + 45; раньше arc.centroid(d) не помогал. Вы знаете, как я могу получить каждую позицию метки за пределами каждой дуги? - person user2975436; 21.12.2013
comment
Этот вопрос должен помочь. - person Lars Kotthoff; 21.12.2013