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/