title: How do I match up text labels in a legend created in d3
body: <p>I am building a data visualization project utilizing the d3 library. I have created a legend and am trying to match up text labels with that legend.</p>
  <p>To elaborate further, I have 10 rect objects created and colored per each line of my graph. I want text to appear adjacent to each rect object corresponding with the line's color.</p>
  <p><strong>My Problem</strong></p>
  <p>-Right now, an array containing all words that correspond to each line appears adjacent to the top rect object. And that's it.</p>
  <p>I think it could be because I grouped my data using the d3.nest function. Also, I noticed only one text element is created in the HTML. Can anyone take a look and tell me what I'm doing wrong?</p>
  <p>JS Code</p>
  <pre><code>const margin = { top: 20, right: 30, bottom: 30, left: 0 },
    width = 1000 - margin.left - margin.right;
  height = 600 - margin.top - margin.bottom;
  
  // maybe a translate line
  
  // document.body.append(svg);
  const div_block = document.getElementById(&quot;main-div&quot;);
  // console.log(div_block);
  
  const svg = d3
    .select(&quot;svg&quot;)
    .attr(&quot;width&quot;, width + margin.left + margin.right) // viewport size
    .attr(&quot;height&quot;, height + margin.top + margin.bottom) // viewport size
    .append(&quot;g&quot;)
    .attr(&quot;transform&quot;, &quot;translate(40, 20)&quot;); // center g in svg
  
  // load csv
  
  d3.csv(&quot;breitbartData.csv&quot;).then((data) =&gt; {
    // convert Count column values to numbers
    data.forEach((d) =&gt; {
      d.Count = +d.Count;
      d.Date = new Date(d.Date);
    });
    // group the data with the word as the key
    const words = d3
      .nest()
      .key(function (d) {
        return d.Word;
      })
      .entries(data);
  
    // create x scale
  
    const x = d3
      .scaleTime() // creaters linear scale for time
      .domain(
        d3.extent(
          data,
  
          // d3.extent returns [min, max]
          (d) =&gt; d.Date
        )
      )
      .range([margin.left - -30, width - margin.right]);
  
    // x axis
  
    svg
      .append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;x-axis&quot;)
      .style(&quot;transform&quot;, `translate(-3px, 522px)`)
      .call(d3.axisBottom(x))
      .append(&quot;text&quot;)
      .attr(&quot;class&quot;, &quot;axis-label-x&quot;)
      .attr(&quot;x&quot;, &quot;55%&quot;)
      .attr(&quot;dy&quot;, &quot;4em&quot;)
      // .attr(&quot;dy&quot;, &quot;20%&quot;)
      .style(&quot;fill&quot;, &quot;black&quot;)
      .text(&quot;Months&quot;);
  
    // create y scale
  
    const y = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) =&gt; d.Count)])
      .range([height - margin.bottom, margin.top]);
  
    // y axis
  
    svg
      .append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;y-axis&quot;)
      .style(&quot;transform&quot;, `translate(27px, 0px)`)
      .call(d3.axisLeft(y));
  
    // line colors
  
    const line_colors = words.map(function (d) {
      return d.key; // list of words
    });
  
    const color = d3
      .scaleOrdinal()
      .domain(line_colors)
      .range([
        &quot;#e41a1c&quot;,
        &quot;#377eb8&quot;,
        &quot;#4daf4a&quot;,
        &quot;#984ea3&quot;,
        &quot;#ff7f00&quot;,
        &quot;#ffff33&quot;,
        &quot;#a65628&quot;,
        &quot;#f781bf&quot;,
        &quot;#999999&quot;,
        &quot;#872ff8&quot;,
      ]); //https://observablehq.com/@d3/d3-scaleordinal
  
    // craete legend variable
    const legend = svg
      .append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;legend&quot;)
      .attr(&quot;height&quot;, 100)
      .attr(&quot;width&quot;, 100)
      .attr(&quot;transform&quot;, &quot;translate(-20, 50)&quot;);
  
    // create legend shapes and locations
  
    legend
      .selectAll(&quot;rect&quot;)
      .data(words)
      .enter()
      .append(&quot;rect&quot;)
      .attr(&quot;x&quot;, width + 65)
      .attr(&quot;y&quot;, function (d, i) {
        return i * 20;
      })
      .attr(&quot;width&quot;, 10)
      .attr(&quot;height&quot;, 10)
      .style(&quot;fill&quot;, function (d) {
        return color(d.key);
      });
  
    // create legend labels
  
    legend
      .append(&quot;text&quot;)
      .attr(&quot;x&quot;, width + 85)
      .attr(&quot;y&quot;, function (d, i) {
        return i * 20 + 9;
      })
      // .attr(&quot;dy&quot;, &quot;0.32em&quot;)
      .text(
        words.map(function (d, i) {
          return d.key; // list of words
        })
      );
    // returning an array as text
    // });
  
    svg
      .selectAll(&quot;.line&quot;)
      .data(words)
      .enter()
      .append(&quot;path&quot;)
      .attr(&quot;fill&quot;, &quot;none&quot;)
      .attr(&quot;stroke&quot;, function (d) {
        return color(d.key);
      })
      .attr(&quot;stroke-width&quot;, 1.5)
      .attr(&quot;d&quot;, function (d) {
        return d3
          .line()
          .x(function (d) {
            return x(d.Date);
          })
          .y(function (d) {
            return y(d.Count);
          })(d.values);
      });
  });
  </code></pre>
  <p><strong>Image of the problem:</strong>
  <a href="https://i.stack.imgur.com/9ZY8L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZY8L.png" alt="enter image description here" /></a></p>
  <p>P.S. I cannot add a JSfiddle because I am hosting this page on a web server, as that is the only way chrome can read in my CSV containing the data.</p>
  <p><strong>My Temporary Solution</strong></p>
  <pre><code>
    function leg_labels() {
      let the_word = &quot;&quot;;
      let num = 0;
  
      for (i = 0; i &lt; words.length; i++) {
        the_word = words[i].key;
        num += 50;
  
        d3.selectAll(&quot;.legend&quot;)
          .append(&quot;text&quot;)
          .attr(&quot;x&quot;, width + 85)
          .attr(&quot;y&quot;, function (d, i) {
            return i + num;
          })
          // .attr(&quot;dy&quot;, &quot;0.32em&quot;)
          .text(the_word);
      }
    }
  
    leg_labels();
  </code></pre>