D3.js dc.js条形图第一个和最后一个条形图未完全显示

我有一个带有

d3.time.scale

x轴的条形图。我每小时显示一些数据，但在使用

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);

---

在第一个条之前和最后一个条之后添加填充是否有解决方法？

从minDate中减去一个小时，在maxDate中添加一个小时，以在min和max数据的每一侧获得一小时的填充

这里的诀窍是使用d3.time.hour.offset并使用offset直到它看起来很好

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

---

请看这张小提琴

错误在于在使用日期对象等对象时没有实现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

中操纵实际的底层数据，这导致了特殊的行为

显而易见的解决方案是创建

newdate（）

对象，如下所示：

然后执行所需的操作：

---

在我的问题中，我已经写道，我排除了这种可能性，因为它不起作用。我会修改这个问题，让它更清楚。这个方法确实有效，也许你的加减一小时的方法有问题。你能发布一个JSFIDLE吗？我的实现中很可能存在一个问题。稍后我将进行另一次查看并构建一个JSFIDLE。谢谢用提琴更新了我的回答来帮助你。哦，哇，太棒了！我玩了一下，最后用了一分钟的偏移量。我用了一种不同的方法来计算偏移量，这会导致奇怪的行为。请参阅我的最新问题。非常感谢，这非常有帮助。您是否知道我最初尝试更改min/maxDate失败的原因？增加域会导致什么意外行为？就像@Austin一样，这就是我希望解决这个问题的方法。然后它将上午9点的酒吧数据错误地移动到上午8点的酒吧。想象一下上面的图表中有一个上午8点的条形图，其中包含当前上午9点的数据（3），而上午9点的条形图现在为空。我想我已经解决了这个问题，但无法完全解释为什么会发生这种情况。请看我对奥斯汀问题的最后评论。谢谢分享。这是一个重要的提示。

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);