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?