D3.js:计算条形图的 x 轴时间刻度？

Question

我有以下数据集:

var data = [
  {
    "air_used": 0.660985, 
    "datestr": "2012-12-01 00:00:00", 
    "energy_used": 0.106402
  }, 
  {
    "air_used": 0.824746, 
    "datestr": "2013-01-01 00:00:00", 
    "energy_used": 0.250462
  } ...
]

我想绘制一个条形图(用于 air_used)和折线图(用于 energy_used)，如下所示:

我的问题是，目前，在我使用的 x 尺度下，图表看起来像这样 - 基本上条形图的位置错误，最后一个条形图从图表上掉下来:

这是一个带有完整代码和工作图的 JSFiddle:http://jsfiddle.net/aWJtJ/4/

为了实现我想要的效果，我认为我需要修改 x 尺度，以便在第一个数据点之前和最后一个数据点之后有额外的宽度，这样条形图全部向左移动每个条形宽度的一半。

谁能帮我弄清楚我需要用 x 尺度做什么？

我已经尝试在域中添加一个额外的月份 - 这会阻止最后一个条从图表的末尾掉下来，但它也添加了一个我不想要的额外刻度，并且它没有固定位置的折线图和刻度线。

如果可能的话，我想继续使用 x 轴的时间刻度，而不是顺序刻度，因为我想使用 D3 的聪明的基于时间的刻度格式化程序和日期解析器，例如xAxis.ticks(d3.time.weeks, 2)。

Answer 1

将您的域从您的实际数据范围扩大到 +1 个月和 -1 个月。这将在图表的两侧填充额外的月份，然后更新条形宽度以将 2 添加到数据元素的计数中。

var barRawWidth = width / (data.length + 2);

请参阅此 fiddle :http://jsfiddle.net/reblace/aWJtJ/6/

如果你想隐藏下限和上限月份，你可以这样破解:http://jsfiddle.net/reblace/aWJtJ/7/只需加上和减去 20 天而不是整个月，但可能有更优雅的方法来做到这一点。

var xExtent = d3.extent(data, function(d) { return d.date; });
var nxExtent = [d3.time.day.offset(xExtent[0], -20), d3.time.day.offset(xExtent[1], 20)];
x.domain(nxExtent);