如何在 d3 图表中定位图例

Question

如何将图例放置在图表之上和之外？

我正在使用这个 d3 示例分组条形图

这是我的PLUNKER，但图例可以与图表重叠。理想情况下，我想要图表上方和图表外的图例。

这是我必须更改的代码。我不明白为什么 0 指的是当前位置。

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

我可以按如下方式移动图例：PLUNKER .attr("transform", function(d, i) { return "translate(" + "-500," + i * 20 + ")"; });将 imore 移动到中心。

然后，我可以将图例从左到右读取，如下所示： .attr("transform", function(d, i) { return "translate(" + (-700+i*100) + "," + 0 + ")"; });如果我可以将其移至图表上方和外部，那就太好了，因为它仍然与某些图表重叠。

---

编辑1笨蛋

谢谢下面的回答。这是我的尝试，正如我所期望的那样，它位于图表上方，但我希望图例中的不同系列看起来更接近（有太多空白）。那么我如何拥有彩色矩形，然后是它旁边的文本，但没有空白呢？

## 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笨蛋

这是我能做的最好的事情，但我只是猜测，也许我会重新访问，但与此同时，如果有人可以向我完美地解释它，我将不胜感激

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

如果您希望图例位于图表之外，您只需增加您想要放置它的边距的大小并将其转换到位置即可。

现在，您正在根据 的大小定位图例的各个部分<svg>。您可以通过创建<g>包含所有图例元素并将其转换到图表中所需的位置来简化此操作。

您需要尝试使用这些值才能准确获得您想要的内容，但下面的值允许您将图例放置在右边距中。

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