Question

我还没有很多关于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);

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/

d3条形图 - 试图勾选到标尺

1 个答案: