在堆積條形圖上正確顯示x軸

嘿所以我在定位堆積條形圖時遇到了困難。它顯示出來了，我只是很難聲明它是x軸。這裏是的jsfiddle：http://jsfiddle.net/E2HST/在堆積條形圖上正確顯示x軸

var xTimeScale = d3.time.scale(). 
domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)]) 
.range([0, width]);

顯然是問題的一部分，我把代碼和不幸陷入了無法完全理解它的陷阱。

var bars = svg.selectAll(".bar") 
    .data(data).enter() 
    .append("g") 
    .attr("class","bar") 
    .attr("transform", function(d){ 
     return "translate("+xTimeScale(d.date)+",0)" 
})

我試過在d.year中換d.date看，因爲沒有更多的d.date，但它是拋出錯誤。任何幫助將不勝感激。

來源

2013-08-20 user1888521

簡單的答案是data陣列中的對象沒有date密鑰，因此您的xTimeScale域未定義。一個簡單的方法來糾正這將是創造這個關鍵的每個數據項：

data.forEach(function(d) { d.date = new Date(d.year, 0, 1); });

它創建日期作爲year變量的1月1日。這基本上解決了你的X軸問題。

但是，我會建議你的數據更適合使用ordinal scale，因爲你只有年度數據。

幾個其他的小東西：

你的x軸定義了太多的刻度，可以考慮改變這個
考慮添加CSS樣式.axis元素，以提高可讀性

有這些細微變化的更新小提琴在http://jsfiddle.net/E2HST/1/

來源

2013-08-20 01:22:55 Josh

非常感謝。這有幫助，但只有4個顯示 - 不是全部5.我更新了X軸以顯示正確的刻度。看起來第一個元素隱藏在x軸上，最後一個元素隱藏在y軸上。思考？ http://jsfiddle.net/E2HST/2/ – user1888521

你的規模定義在這裏是問題，如果你仔細觀察，你會看到2013年的酒吧只是在svg區域的右側。您的比例尺具有[2009,2013]的域，每個欄的左下角從該年的比例位置開始，您可以通過刪除翻譯軸文本的代碼輕鬆看到這一點。爲了解決這個問題，我會再次建議切換到序數標度，它內置了用於計算條和間距等的功能。 – Josh

在堆積條形圖上正確顯示x軸

回答

相關問題