D3 wrapping text legends

Question

I am using legends for d3 charts. Below is code -

 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("&nbsp","\n"); })
      .call(wrap)
      ;

Here I have long texts for legends and small place to accomodate it. I want to wrap the text for legends.

For that I followed this SO answer and used wrap method. But seems wrap is not working in this case.

How can I wrap my text for legends in d3 js?

Wrapping text in d3 is a challenge for many ( element does not support all css properties as normal text elements). https://stackoverflow.com/questions/24784302/wrapping-text-in-d3 --wrap function should work very well. Why are you replacing all spaces by line feed and passing it to wrap..How about adding a foreign object — B Kalra, Jun 15 '22 at 11:55
@BKalra I have already added wrap function in my code and mentioned the same SO question in my post. Somehow its not working — C Sharper, Jun 15 '22 at 11:58
Why replacing spaces with line feeds..d.replace("&nbsp","\n") — B Kalra, Jun 15 '22 at 11:59
wrap function detects spaces and works accordingly. Try without replacing the spaces — B Kalra, Jun 15 '22 at 12:00
Can you please also remove text-anchor. This might not be a root cause but I am wondering if it effects something — B Kalra, Jun 15 '22 at 12:07
function wrap(text, width) --- are you providing second parameter — B Kalra, Jun 15 '22 at 12:08
text-anchor removed and checked. Not working. Width also given , but not works — C Sharper, Jun 15 '22 at 12:13
getComputedTextLength--How are you doing this function..Hope you are considering font-size and font family. — B Kalra, Jun 15 '22 at 13:18

D3 wrapping text legends

0 Answers0