title: d3.js adding legend to multiline series chart
body: <p>How would one add a legend to the multiline series chart? I tried but am not getting any legend to display.</p>
  
  <p>The block here:</p>
  
  <p><a href="http://bl.ocks.org/3884955">http://bl.ocks.org/3884955</a></p>
  
  <p>has a flaw when the various series converge to the same point, like zero. All the labels will be overlayed on each other. Instead of going for these labels, a traditional legend would be useful.</p>
  
  <p>I tried adding this </p>
  
  <pre><code>var legend = svg.append("g")
  .attr("class", "legend")
  .attr("height", 100)
  .attr("width", 100)
  .attr('transform', 'translate(-20,50)');    
  
  legend.selectAll('rect')
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
    .append("rect")
    .attr("x", width)
    .attr("y", function(d, i){ return i *  20;})
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", function(d) { 
      return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; }));
    });
  
  legend.selectAll('text')
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
    .append("text")
    .attr("x", width)
    .attr("y", function(d, i){ return i *  20 + 9;})
    .text(function(d) {
    return d.name;
    });
  </code></pre>
  
  <p>to the end of the code, the key names (d.name) match how my data is formatted, but it does not display. At one point it showed all black boxes to the right of the graph so that means I am close but I am missing something important</p>
  
  <p>any insight appreciated</p>