Estoy usando leyendas para gráficos d3. A continuación se muestra el código -
var padding = { left:50, right:100, top:30, bottom:30 }; var legend = svgColorCode.selectAll(".legend") .data(keyText) //.filter(x=>x!="Completed On Time") .enter().append("g") .attr("class", "legend") .attr("transform", function (d, i) { return "translate(" + (((keys.length - (i)) * -25) + (i == 0 ? 0 : (i == 1 ? 60 : (i == 2 ? 90 : (i == 3 ? 100 : 0))))) + "," + (height - 190) + ")"; }) .attr("fill", function (d, i) { return colors[i]; }); legend.append("rect") .attr("x", (x, i) => (padding.top * 2 + labHeight * (i)) + 40) .attr("width", 18) .attr("height", 18) .style("fill", function (d, i) { return colors[operationalKeys[i]]; }) legend.append("text") .attr("x", (x, i) => (padding.top * 2 + labHeight * i) + 60) .attr("y", 9) .attr("font-size", "0.65rem") .attr("dy", ".35em") .style("text-anchor", "start") .text(function (d) { console.log("d");console.log(d); return d.replace(" ","\n"); }) .call(wrap) ;Aquí tengo textos largos para leyendas y poco lugar para acomodarlo. Quiero envolver el texto de las leyendas.
Para eso, seguí esta respuesta SO y wrap el método de ajuste. Pero parece que wrap no funciona en este caso.
¿Cómo puedo envolver mi texto para leyendas en d3 js?