d3 条形图 - 尝试将刻度线对齐到条形图答案

【问题标题】：d3 bar chart - trying to line up tick to bard3 条形图 - 尝试将刻度线对齐到条形图
【发布时间】：2013-03-11 18:49:42
【问题描述】：

我在 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);

【问题讨论】：

标签： javascript d3.js bar-chart

【解决方案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]);

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

【讨论】：