D3条形图中的图例放置问题

Question

我有一个堆积条形图。我想将图例放在图表区域的正上方，并在中心，如

我在这里创建了一个小提琴Legend Fiddle

但是我在将图例定位在正确的位置时遇到了问题，因此它也适用于IPAD。

我知道一些问题

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

请帮助您将传奇放在正确的位置。 谢谢 Gunjan

Answer 1

如果要在移动设备上正确显示，则应该使用动态视口查询替换大多数静态元素大小。但是，正确显示图例并不明确要求。

我在上边距添加了10px：

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

然后我更改了应用于图例元素的变换

       .attr("transform", function(d, i) { return "translate("+ ((i * 50) + (width/2)-25)  +"," + (-margin.top) + ")"; });

我还必须删除rect和text元素的“x”属性。当您尝试将元素放置在两个不同的位置时会让人感到困惑，因此在此处将其移除可让您专注于使用组变换正确定位元素。

      legend.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);
  legend.append("text")
    .attr("dx", -4)
    .attr("dy", ".8em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

http://jsfiddle.net/QDVUc/1/