How to position the legend in a d3 chart
<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>