如何在d3图表中定位图例

Question

How do I position the legend above and out of the chart?

I am working in this d3 example Grouped Bar Chart

Here is my PLUNKER but the legend can overlap the graph. Ideally I would like the legend above and out of the chart.

This is my code that I have to change. I don't understand why the 0 refers to the current position.

  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 + ")"; });

I can move the legend as follows: PLUNKER .attr("transform", function(d, i) { return "translate(" + "-500," + i * 20 + ")"; }); which moves imore to the center.

I can then have the legend read from left to right as follows: .attr("transform", function(d, i) { return "translate(" + (-700+i*100) + "," + 0 + ")"; }); I would be great if I could move this above and outside the chart as it still overlaps some of the graph.

---

EDIT1 PLUNKER

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 how do I have the coloured rect and then the text beside it, but without the whitespace?

## 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; });

---

EDIT2 PLUNKER

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

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; });

Answer 1

If you want the legend to be located outside of the graph, you just need to increase the size of the margin where you want it to be placed and translate it into position.

Right now you are positioning the individual parts of your legend based on the size of the <svg> . You can simplify this by creating a <g> that contains all of your legend elements and translating that to its desired position in the graph.

You'll need to play around with the values to get exactly what you want, but below are the values that would allow you to place the legend in the right margin.

var margin = {top: 20, right: 100, bottom: 30, left: 40};

var legendHolder = svg.append('g')
  // translate the holder to the right side of the graph
  .attr('transform', "translate(" + (margin.left + width) + ",0)")

var legend = legendHolder.selectAll(".legend")
    .data(ageNames.slice().reverse())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
  .attr("x", 0)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

legend.append("text")
  .attr("x", 0)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });

Answer 2

The legend in the example appears on the right hand side, despite a transform of zero because the elements in the group have an x attribute of nearly the width of the frame (minus a small offset), pushing them to the right:

 legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });

So an x transform of -500, about half your width, pulls it to the middle, as noted. Using a smaller x attribute for the legend elements might help make it clearer for setting up your legend (this is seen in the other answer), though as your comment notes, it isn't too hard to make it work as it is (just more confusing than needed).