Question

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

时间窗口基于数据本身，计算方法如下：

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轴内消失。

此外，我已经尝试通过减去/添加一小时到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的传递引用。

除了奥斯汀的答案，它通过使用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);