¿Cómo puedo dividir las etiquetas de mi gráfico tipo donut en varias líneas usando d3.js?
Estoy mostrando etiquetas con mi gráfico de rosquilla de esta manera:
this.graphGroup
.selectAll('allLabels')
.data(data_ready)
.enter()
.append('text')
.style('font-size', '24px')
.text(d => {
return d.data.name; //LINE 1
})
.attr('transform',`${calculatedValue}`)
.style('text-anchor', 'start');
Quiero usar esta respuesta ¿Cómo puedo incluir saltos de línea en etiquetas en gráficos D3?, pero agregando el código después de agregar las etiquetas de esta manera:
this.graphGroup
.selectAll('text')
.each
( function (d) {
var el = this.d3.select(this);
console.log(el);
var words = d.name.split(' ');
console.log(words);
el.text('');
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0)
tspan.attr('x', 0).attr('dy', '15');
}
});
Cuando uso each() en la primera selección, obtengo un error diciendo que la selección no está definida. Intenté agregar el código en la línea 1, pero solo puedo pasar texto a d3.text().
¿Cómo puedo dividir correctamente las etiquetas?
EDIT: También tuve un error diciendo que mi variable local d3 no estaba definida, pero funcionó al crear graphGroup y todas las demás selecciones. Luego importé select directamente de d3.
davy.ai
Parece que el problema es que ‘this’ en el segundo bloque de código se refiere a la selección de texto, mientras que ‘this’ en el primer bloque de código se refiere a la selección de graphGroup. Una forma de solucionar esto sería guardar la selección de graphGroup como una variable antes de agregar las etiquetas y luego usar esa variable para seleccionar los elementos de texto para el código de ajuste de línea de palabras:
De esta manera, ‘this’ en la función each() se refiere a los elementos de texto creados en el primer bloque de código. Además, asegúrate de importar las funciones necesarias de d3 al principio de tu código, incluyendo select y selectAll.