Como adicionar correctamente as legendas ao gráfico circular d3?

Question

Como adicionar correctamente as legendas ao gráfico circular d3?

fiz um gráfico circular usando {[[1]} e quero adicionar legendas a cada caminho.

escrevi um código:

var labels = svg.selectAll('path').insert("text").data(pie(data))
       .text( function (d) { return d.value; })
       .attr("font-family", "sans-serif")
       .attr('x', 0)           
       .attr('y', 0)
       .attr("font-size", "12px")
       .attr("fill", "red");

mas não há nenhum resultado visível, só eu posso ver que existem novos elementos de texto nas Ferramentas de desenvolvimento do Chrome.

Result and Chrome dev tools

Como é que eu preciso de mudar o meu código para ver todas as etiquetas nas partes do meu gráfico circular?

0

javascript d3.js

Author: Long Luong, 2018-02-09

Source

1 answers

score 1 · Accepted Answer

Não é possível adicionar text nó em criança para path. Você deve agrupar estes elementos com g tag e adicionar path s e texts como uma criança para g elementos.

// append "g" it is a container for your slice and label
var arcs = vis.selectAll("g.slice")
  .data(pie)
  .enter()
  .append("g")
  .attr("class", "slice");

// draw slice of pie chart
arcs.append("path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        return arc(d);
    });

// draw label
arcs.append("text")
  .attr("transform", function(d){
      d.innerRadius = 0;
      d.outerRadius = r;
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text( function(d, i) {
      return data[i].label;}
    );

Neste caso, a sua estrutura parecerá:

<g>
 <path d=...></path>
 <text>some text</text>
</g>
<g>
 <path d=...></path>
 <text>some text</text>
</g>
...

Verificar o exemplo de trabalho:

var w = 280;
var h = 280;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
		          {"label":"Category B", "value":50}, 
		          {"label":"Category C", "value":30}];

var vis = d3.select('body').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

var arc = d3.svg.arc().outerRadius(r);

var arcs = vis.selectAll("g.slice")
  .data(pie)
  .enter()
  .append("g")
  .attr("class", "slice");

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

arcs.append("text")
  .attr("transform", function(d){
			d.innerRadius = 0;
			d.outerRadius = r;
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text( function(d, i) {
      return data[i].label;}
		);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>