Fecha publicación: 3 may 2021

D3js Añadiendo texto a gráfica de tarta

Ya tenemos la gráfica, pero ahora viene nuestro jefe y nos dice... "Paco.... quiero ver los textos de que es cada cosa dentro de su quesito en la gráfica"

Vamos a ver como hacer ésto.

Manos a la obra

Para ello sólo tenemos que volver a seleccionar todas las piezas que hemos creado, buscar el centro de cada "quesito" y añadir el texto elegiendo una fuente.

Vamos a ver como podemos añadir el texto:

grupoGrafica
  .selectAll("porciones")
  .data(datosArcos)
  .enter()
  .append("path")
  .attr("d", <any>constructorDePath)
  .attr("fill", function (d) {
    return color(d.data.mes);
  });

+ grupoGrafica
+  .selectAll("porciones")
+  .data(datosArcos)
+  .enter()
+  .append("text")
+  .attr("d", <any>constructorDePath)
+  .text(function (d) {
+    return d.data.mes;
+  })
+  .style("font-size", 17)
+  .style("font-family", "arial")
+  .style("fill", "#FFFFFF");

Hasta aquí bien, peeero ¿Cómo sabemos dónde poner el texto? el generador de arcos en d3js nos da una funcion de ayuda llamada centroid está función me da el punto central del arco que estoy tratando, de esta manera:

  • Calculamos el centroide para cada porción.
  • Posicionamos el texto en esas coordenadas (éste texto a su vez lo centramos).
grupoGrafica
  .selectAll("slice")
  .data(datosArcos)
  .enter()
  .append("text")
  .attr("d", <any>constructorDePath)
  .text(function (d) {
    return d.data.mes;
  })
  .style("font-size", 17)
  .style("font-family", "arial")
  .style("fill", "#FFFFFF")
+  .style("text-anchor", "middle")
+  .attr("transform", function (d) {
+    const centro = constructorDePath.centroid(<any>d);
+    const command = `translate(${centro[0]}, ${centro[1]})`;
+    return command;
+  })
  ;

Ahora podemos ver el texto en cada porción del gráfico.

Podríamos haber hecho un código más elegante, encapsulando todo el estilado en una clase de CSS.

Referencias

Este ejemplo está basado en el ejemplo descrito en este enlace: https://www.d3-graph-gallery.com/graph/pie_annotation.html

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.