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

Question

我有堆积的条形图。 我想将图例放在图表区域的上方和中间

我在这里创建了一个小提琴传奇小提琴

但是我在将图例定位在正确位置以使其也可以在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/