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

Question

嘿，我在放置堆疊條形圖時遇到困難。 它正在顯示，我只是很難宣布它是x軸。 這是jsfiddle： http : //jsfiddle.net/E2HST/

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，因為沒有更多的d.date，但是它拋出了錯誤。 任何幫助將不勝感激。

Answer 1

簡單的答案是data數組中的對象沒有date鍵，因此xTimeScale域是未定義的。 糾正此問題的簡單方法是為每個數據項創建此密鑰：

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

它將日期創建為year 1月1 year 。 這基本上可以解決您的x軸問題。

但是，我建議您的數據更適合使用序數刻度 ，因為您只有年度數據。

其他一些小問題：

• 您的x軸定義中有太多刻度線，請考慮更改此刻度
• 考慮為.axis元素添加CSS樣式，以提高可讀性

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