Javascript 如何强制nvd3图表时间跨度拉伸图表的宽度？

我在上面的plnkr中有最新的d3和nvd3库。当您第一次查看图表时，您会注意到所有时间跨度刻度

09:00

，

08:30

，

08:00

等都在左侧X轴上相互挤压/重叠

现在，除非用户单击图表下方的时间测距仪或调整窗口大小，否则timespans将无法正确拉伸图表的长度

当前图表在第一次加载时看起来是这样的：

当它看起来像这样时：

知道我哪里出错了吗？我在这里发现了这个问题，但是答案对我来说并不适用

---

我的nv.addGraph代码

var data =[{
    "key" : "Price",
    "color" : "#4C73FF",
    "values" : [ [ 1443621600000 , 71.89],
                 [ 1443619800000 , 75.51],
                 [ 1443618000000 , 68.49],
                 [ 1443616200000 , 62.72],
                 [ 1443612600000 , 70.39],
                 [ 1443610800000 , 59.77]]
}];

nv.addGraph(function() {
      var chart = nv.models.linePlusBarChart()
          .margin({top: 20, right: 40, bottom: 50, left: 40})
          .x(function(d,i) { return i })
          .y(function(d) { return d[1] })
          .color(d3.scale.category10().range());

      chart.xAxis.tickFormat(function(d) {
          var dx = data[0].values[d] && data[0].values[d][0] || 0;
          // return time in hours:
          return d3.time.format('%I:%M')(new Date(dx))
      });

      chart.y1Axis
          .tickFormat(d3.format(',f'));

      chart.y2Axis
          .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

      chart.bars.forceY([0]);
      chart.lines.interactive(false);
      chart.height(300);
      chart.noData("There is no Data to display at the moment.");

      // Remove legend:
      chart.showLegend(false);

      d3.select('#chart svg')
          .datum(data)
          .transition().duration(500)
          .call(chart);

      nv.utils.windowResize(chart.update);

      return chart;
  });

就这么想出来了

d3.select('#chart svg')
    .datum(res)
    .transition().duration(500)
    .call(chart);

chart.update();  // <- Needed to add this

// nv.utils.windowResize(chart.update);

d3.选择（“#图表svg”）
.基准面（res）
.transition（）.持续时间（500）
.电话（图表）；
chart.update（）；//行
nv.utils.windowResize（chart.update）并不是完全无用的，如果你需要图表来响应窗口大小调整，你需要它。啊，真的@shabeer90，我想我只是太沮丧了，呵呵。。。另外，只构建一个移动应用程序，因此它不需要
窗口大小调整
，但是当我返回到桌面仪表板并使用此图表时，我将保留该行。