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

我还必须删除“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/