d3條形圖 - 試圖勾選到標尺

Question

我還沒有很多關於D3的經驗，但是我找到了一個帖子，其中海報創造了這個圖表的小提琴（可以在這里找到： 需要幫助在D3.js條形圖中排列x軸刻度與條形圖 ） 。 我試圖將其修改為顯示幾天而不是幾個月，但這樣做會使得滴答聲的對齊關閉。 我希望我能得到一些幫助，試圖調整滴答聲並理解其工作原理。

http://jsfiddle.net/MmEjF/32/

我添加了ticks方法來指定步驟，但這樣做會拋出對齊。

var xAxis = d3.svg.axis().
scale(xTimeScale).
orient("bottom").
ticks(d3.time.days, 1).
tickFormat(formatDate);

Answer 1

您只需要更改以下內容：

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

至：

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]);

我剛剛將offset的最后一個參數更改為1而不是0，為零只返回日期的副本，如文檔中所述。

此外，我想指出，把. 在行的末尾不是常規並使代碼難以閱讀，我知道它來自前面的例子，但沒有受到它的啟發。 它應該是這樣的：

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]);

以下是帶有工作代碼的jsFiddle： http ： //jsfiddle.net/chrisJamesC/MmEjF/34/