0

我还没有很多使用 D3 的经验,但我发现了一个帖子,其中海报用这个图表创建了一个小提琴(可以在这里找到:Need help lining up x axis ticks with bars in D3.js bar chart) . 我试图将其修改为显示天而不是月,但这样做时刻度线的对齐是关闭的。我希望我能得到一些帮助,试图对齐刻度并了解它是如何工作的。

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

我添加了 ticks 方法来指定步骤,但这样做会导致对齐关闭。

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

1 回答 1

2

您只需要更改以下内容:

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

我只是将偏移量的最后一个参数更改为 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/

于 2013-03-11T23:21:02.223 回答