需要帮助在D3.js条形图中排列x轴刻度和条形 [英] Need help lining up x axis ticks with bars in D3.js bar chart

问题描述

我有一个工作线性条形图，使用 D3.js ，它还具有基于时间的x轴。条被绑定到一个计数属性，而轴绑定到日期属性。轴中的刻度线不与条排成队。任何想法如何将他们两个排队？

I have a working linear bar chart using D3.js, which also has time-based x axis. The bars are bound to a count attribute, while the axis is bound to a date attribute. The ticks in the axis are not lining up with the bars. Any idea how to line them both up?

这里是jsFiddle： http://jsfiddle.net/MmEjF/

Here's the jsFiddle: http://jsfiddle.net/MmEjF/

推荐答案

这是因为图表有14个柱形图，但15个标记。

This is happening because the chart has 14 bars, but 15 tick marks.

第一个标记应该是数据集开始之前的一个月。

The first tick mark should be the month prior to the start of your data set.

您可以通过将xTimeDomain的开头向前拉一个月来解决这个问题：

You can fix this by pulling forward the start of xTimeDomain by one month:

xTimeDomain[0] = new Date(new Date(xTimeDomain[0]).setMonth(xTimeDomain[0].getMonth()-1));

这篇关于需要帮助在D3.js条形图中排列x轴刻度和条形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！