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 回答