Estoy mostrando etiquetas con mi gráfico de anillos 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 incluyo nuevas líneas en las etiquetas de los gráficos D3? pero agregando el código después de esta adición de etiquetas como esta,
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 cada () en la primera selección, aparece un error que dice 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 romper las etiquetas correctamente?
EDITAR: También tuve un error que decía que mi variable local d3 no estaba definida, pero funcionó mientras creaba el grupo de gráficos y todas las demás selecciones, luego importé la selección de d3 directamente.
Descubrí la respuesta; each() no funciona si se ha llamado a la función data() en esa selección, por lo que la respuesta directamente desde la publicación vinculada no funcionará.
La otra opción es usar call() en cada elemento de texto creado, así;
this.graphGroup .selectAll('allLabels') .data(data_ready) .enter() .append('text').style('font-size', '24px') .attr('transform',`${calculatedValue}`) .style('text-anchor', 'start') .text(d => { return d.data.name; }) .call(lineBreak, 40);Donde lineBreak es otra función que he definido, el primer parámetro que se pasa a la función será una referencia al elemento en bucle en el caso, los diferentes elementos de texto.
la función de salto de línea:
function lineBreak(text, width) { text.each(function () { var el = d3.select(this); let words = el.text().split(' '); let wordsFormatted = []; let string = ''; for (let i = 0; i < words.length; i++) { if (words[i].length + string.length <= width) { string = string + words[i] + ' '; } else { wordsFormatted.push(string); string = words[i] + ' '; } } wordsFormatted.push(string); el.text(''); for (var i = 0; i < wordsFormatted.length; i++) { var tspan = el.append('tspan').text(wordsFormatted[i]); if (i > 0) tspan.attr('x', 0).attr('dy', '20'); } }); }Optimizará esta función y la editará más tarde. ¡Gracias!