正確調整D3條形圖的大小

Question

我正在嘗試添加標籤/軸/標題/等到D3條形圖。我可以得到接近正確尺寸的東西，但是我最終會剪掉最後一個小節的一部分（所以最後一個小節比其他小節更瘦）。 下面是相關代碼：

var x = d3.scale.linear() 
.domain([0, object.data.length]) 
.range([0, object.width]); 
var y = d3.scale.linear() 
.domain([object.min-(object.max-object.min)*.15, object.max (object.max-object.min)*.15]) 
.rangeRound([ object.height - 30, 0]); 

var vis = d3.select(object.ele) 
    .append("svg:svg") 
    .attr("width", object.width) 
    .attr("height", object.height) 
    .append("svg:g"); 

vis.selectAll("g") 
.data(object.data) 
.enter().append("rect") 
.attr("x", function(d, i) { return x(i); }) 
.attr("y", function(d) { return object.height - y(d.value); }) 
.attr("width", object.width/object.data.length - 1) 
.attr("height", function(d) { return y(d.value); }) 
.attr("transform", "translate(30,-30)"); 

目前一切（標籤，軸，等等）是30像素。如何正確更改圖形以騰出我需要的任何空間？

Answer 1

您正在切斷最後一個小節，因爲您使用了x座標轉換，但是x的範圍僅限於沒有額外30個像素的寬度。

另外它可能更容易簡化你的y域使用.domain（[object.min，object.max]），然後使「y」和「高度」函數顛倒過來。這樣你就可以在y（d.value）處開始矩形，並使它的高度爲object.height - y（d.value）。

我會最初創建三個組，一個用於y軸，一個用於x軸，然後是另一個用於酒吧。在最後一組中繪製您的酒吧，然後翻譯整個組本身，而不是每個單獨的酒吧。增加object.width和object.height的大小以匹配所需的總空間。