javascript - d3 条形图 - 尝试将刻度线排列到条形图上

Question

我对 D3 还没有太多的经验，但我发现了一篇帖子，其中发帖者用这个图表创建了一个 fiddle (可以在这里找到: 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);

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，如果设置为零，它只会返回日期的副本，如 documentation 中所述。 。

此外，我想指出，将 . 放在行尾不是惯例，并且会使代码难以阅读，我知道它来自前面的示例，但不这样做受到它的启发。它应该是这样的:

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/