Question

如何将图例放在图表的上方和外侧？

我正在使用这个d3示例Grouped Bar Chart

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

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

.attr("transform", function(d, i) { return "translate(" + "-500," + i * 20 + ")"; });

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

然后我可以从左到右阅读图例，如下所示： ## 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; });如果我能在图表的上方和外部移动它，我会很棒，因为它仍然会覆盖图表的某些部分。

EDIT1 PLUNKER

回答一下这个问题。这是我的尝试，正如我所期望的那样高于图表，但我希望图例中的不同系列看起来更接近（白色空间太多）。那么我如何获得彩色矩形，然后是旁边的文字，但没有空格？

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

EDIT2 PLUNKER

这是我能做的最好的事情，但我失败了我猜测，也许我会重新考虑但是在意味着时间，如果有人能够精美地向我解释那将不胜感激

{{1}}

Answer 1

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

现在，您根据<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; });来简化此操作。

您需要使用这些值来获得您想要的内容，但下面是允许您将图例放在右边距的值。

{{1}}

Answer 2

示例中的图例显示在右侧，尽管变换为零，因为组中的元素具有接近帧宽度的x属性（减去小偏移量），将它们推向右侧：

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

如上所述，x转换为-500，大约是宽度的一半，将其拉到中间。对图例元素使用较小的x属性可能有助于更清楚地设置图例（这在另一个答案中可以看到），尽管如您的评论所述，但它并不难以使其工作（只是比需要更混乱）。

如何在d3图表中定位图例

EDIT1 PLUNKER

EDIT2 PLUNKER

2 个答案: