title: Adding a chart legend in D3
body: <p>I am having trouble adding a chart legend to my d3js chart. Here is my current approach:</p>
  
  <pre><code>var legend = svg.append("g")
    .attr("class", "legend")
    .attr("x", w - 65)
    .attr("y", 25)
    .attr("height", 100)
    .attr("width", 100);
  
  legend.append("rect")
    .attr("x", w - 65)
    .attr("y", 25)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", function(d) { return color_hash[dataset.indexOf(d)][1] });
  
  legend.append("text")
    .attr("x", w - 65)
    .attr("y", 25)
    .text(function(d) { return color_hash[dataset.indexOf(d)][0] + ": " + d; });
  </code></pre>
  
  <p>Then I am attempting to style the <code>.legend</code> class:</p>
  
  <pre><code>.legend {
              padding: 5px;
              font: 10px sans-serif;
              background: yellow;
              box-shadow: 2px 2px 1px #888;
          }
  </code></pre>
  
  <p>But I'm not having much luck.</p>
  
  <p>Is anyone familiar with adding legends to charts able to provide the best way to do so? I am not finding many resources for this online.</p>
  
  <p>Here is my entire graph: 
  <a href="http://jsbin.com/ewiwag/2/edit">http://jsbin.com/ewiwag/2/edit</a></p>