title: How to position the legend in a d3 chart
body: <p><strong>How do I position the legend above and out of the chart?</strong></p>
  
  <p>I am working in this d3 example <a href="https://bl.ocks.org/mbostock/3887051" rel="nofollow noreferrer">Grouped Bar Chart</a> </p>
  
  <p>Here is my <a href="https://plnkr.co/edit/Eqf9nRQ4iq7I3U1oA2OR?p=preview" rel="nofollow noreferrer">PLUNKER</a> but the legend can overlap the graph. Ideally I would like the legend above and out of the chart.  </p>
  
  <p>This is my code that I have to change. I don't understand why the 0 refers to the current position. </p>
  
  <pre><code>  var legend = svg.selectAll(".legend")
        .data(ageNames.slice().reverse())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  </code></pre>
  
  <p>I can move the legend as follows: <a href="https://plnkr.co/edit/Eqf9nRQ4iq7I3U1oA2OR?p=preview" rel="nofollow noreferrer">PLUNKER</a>
  <code>.attr("transform", function(d, i) { return "translate(" + "-500," + i * 20 + ")"; });</code> which moves imore to the center. </p>
  
  <p>I can then have the legend read from left to right as follows:
  <code>.attr("transform", function(d, i) { return "translate(" + (-700+i*100) + "," + 0 + ")"; });</code> I would be great if I could move this above and outside the chart as it still overlaps some of the graph.</p>
  
  <hr>
  
  <h2>EDIT1 <a href="https://plnkr.co/edit/d2lGTUbyO2sTyblKiLHl?p=preview" rel="nofollow noreferrer">PLUNKER</a></h2>
  
  <p>tks to an answer belwo. This is my attempt, which is above the chart as I would expect, but I would like the different series in the legend to appear closer together (there is too much white space). So <strong>how do I have the coloured rect and then the text beside it, but without the whitespace?</strong></p>
  
  <pre><code>## the below is close but I am just guessing 
  var legendHolder = svg.append('g')
    // translate the holder to the right side of the graph
    .attr('transform', "translate(" + (-width) + "," + (-margin.top) + ")")
    .attr('class','legendHolder')
  
    var legend = legendHolder.selectAll(".legend")
                  .data(ageNames.slice().reverse())
                  .enter().append("g")
                  .attr("class", "legend")
  
    legend.append("rect")
        .attr("x", function(d,i){return (width +(150*i))})
        .attr("width", 36)
        .attr("height", 18)
        //.style("text-anchor", "end")
        .style("fill", color);
  
    legend.append("text")
        //.attr("x", width - 24)
        .attr("x", function(d,i){return (width +(140*i))})
        .attr("y", 9)
        .attr("dy", ".35em")
        //.style("text-anchor", "end")
        .text(function(d) { return d; });
  </code></pre>
  
  <hr>
  
  <h2>EDIT2 <a href="https://plnkr.co/edit/EfbUCS5Cv0W7evcfkwO8?p=preview" rel="nofollow noreferrer">PLUNKER</a></h2>
  
  <p>This is the best I can do, but I fell I am jsut guessing, maybe I will revisit but in the meant time if anyone can beautifully explain it to me that would be greatly appreciated</p>
  
  <pre><code>var legendHolder = svg.append('g')
    // translate the holder to the right side of the graph
    .attr('transform', "translate(" + (-width) + "," + (-margin.top) + ")")
    .attr('class','legendHolder')
  
    var legend = legendHolder.selectAll(".legend")
                  .data(ageNames.slice().reverse())
                  .enter().append("g")
                  .attr("class", "legend")
                  .attr('transform', function(d, i) { return "translate(" + -40*i + "," + 0 + ")"; })
                  .attr("width", 36)
  
    legend.append("rect")
        .attr("x", function(d,i){return (width +(150*i))})
        .attr("width", 18)
        .attr("height", 18)
        //.style("text-anchor", "end") //"startOffset"="100%
        //.style("startOffset","100%") //"startOffset"="100%
        .style("fill", color);
  
    legend.append("text")
        //.attr("x", width - 24)
        .attr("x", function(d,i){return (width +(150*i)+20)})
        .attr("y", 9)
        .attr("dy", ".35em")
        //.style("text-anchor", "end")
        .text(function(d) { return d; });
  </code></pre>