D3条形图-尝试排队tick到条形

d3 bar chart - trying to line up tick to bar

本文关键字：tick 排队 条形图 D3      更新时间：2023-09-26

我还没有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);

您只需更改以下内容:

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，对于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/
相关文章：