dc.js barChart 第一个和最后一个柱没有完全显示

Question

我有一个带有 d3.time.scale x 轴的条形图。我每小时显示一些数据，但在使用 centerBar(true).
时，第一个和最后一个数据点条总是被减半（当使用 centerBar(false) 时，最后一个条完全消失。）

时间window基于数据本身，计算如下：

var minDate = dateDim.bottom(1)[0]["timestamp"];
var maxDate = dateDim.top(1)[0]["timestamp"];

.x(d3.time.scale().domain([minDate, maxDate]));

最后一行设置时标域使用min和maxDate。这是它的样子：

我使用 .xUnits(function(){return 60;}) 稍微增加了条形宽度，因为默认设置非常细，以至于第一个条形在 y 轴内消失了。

此外，我已经尝试将域更改 substracting/adding 一小时到 min/maxDate，但这会导致第一个栏出现意外行为。

我使用以下方法计算偏移量：

minDate.setHours(minDate.getHours() - 1);
maxDate.setHours(maxDate.getHours() + 1);

是否有针对此问题的修复或解决方法以在第一个和最后一个小节之前和之后添加填充？

Answer 1

从 minDate 中减去一个小时并向 maxDate 中添加一个小时，以便在最小和最大数据的每一侧获得一个小时的填充值。

这里的技巧是使用 d3.time.hour.offset 并使用偏移量直到它看起来不错。

.x(d3.time.scale().domain([d3.time.hour.offset(minDate, -1), d3.time.hour.offset(maxDate, 2)])); `

Answer 2

错误是在使用 Date 对象等对象时没有意识到 JavaScript 的引用传递。

除了 Austin 的答案确实通过使用 d3 功能解决了问题之外，我还研究了为什么我最初通过修改 minDate 和 maxDate 变量的尝试失败了。

问题是在创建变量时

var minDate = dateDim.bottom(1)[0]["timestamp"];
var maxDate = dateDim.top(1)[0]["timestamp"];

我创建了指向实际数据的指针，而不是创建与 minDate 和 maxDate 对象具有相同值的新对象。该行

minDate.setHours(minDate.getHours() - 1);

因此在日期维度 dateDim 内操纵了实际的基础数据，然后导致了奇怪的行为。

显而易见的解决方案是创建 new Date() 对象，如下所示：

var minDate = new Date(dateDim.bottom(1)[0]["timestamp"]);
var maxDate = new Date(dateDim.top(1)[0]["timestamp"]);

然后进行所需的操作：

minDate.setHours(minDate.getHours() - 1);   
maxDate.setHours(maxDate.getHours() + 1);

dc.js barChart first and last bar not displaying fully