How to word wrap legend labels in d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

// Example data for the legend
const legendData = ["Label 1", "Label 2", "Label 3 with a longer text"];

// SVG container for the legend
const svg = d3.select("svg");

// Width and height of the legend
const legendWidth = 200, legendHeight = 150;

// Add a group for the legend
const legend = svg.append("g")
  .attr("transform", "translate(10, 10)");

// Calculate the maximum width for each line
const maxLineWidth = Math.floor(legendWidth / 7); // Adjust the number to your needs

// Add legend labels
const labels = legend.selectAll("text")
  .data(legendData)
  .enter().append("text")
  .attr("x", 10)
  .attr("y", (_, i) => i * 20)
  .text(d => d)
  .each(function(d) {
    const words = d.split(" ");
    let line = "";
    const lineNumber = this.__data__.length > maxLineWidth ? 2 : 1; // Line number based on the maximum width of the label
    const lineHeight = 1.1; // Adjust the line height if needed
    const tspan = d3.select(this);
    tspan.text("");

    for (let i = 0; i < words.length; i++) {
      const tspanLine = tspan.append("tspan")
        .attr("x", 10)
        .attr("dy", i === 0 ? 0 : lineHeight + "em")
        .text(line + words[i]);
      
      // If the current line exceeds the maximum width, move the remaining words to the next line
      if (tspanLine.node().getComputedTextLength() > maxLineWidth) {
        line += words[i] + " ";
        tspanLine.text(line.trim());
        line = "";
        i--;
      } else {
        line += words[i] + " ";
      }
    }
  });