javascript - 如何强制nvd3图表时间跨度拉伸(stretch)图表的宽度？

Question

http://plnkr.co/edit/ymrqIOGTBqF6TVMTvC4T?p=preview

我在上面的 plnkr 中有最新的 d3 和 nvd3 库。当您第一次查看图表时，您会注意到所有时间间隔 09:00、08:30、08:00 等都是在左侧 xAxis 上彼此压扁/重叠。

现在，时间跨度不会正确拉伸(stretch)图表的长度，直到用户单击图表下方的时间范围查找器或调整窗口大小。

当前图表在首次加载时如下所示:

当它看起来像这样时:

知道我哪里出错了吗？我在这里发现了这个问题NVD3 Set Expanded as default然而答案对我不起作用。

<小时/>

我的 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;
  });

Answer 1

刚刚想通了!

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

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

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

下面这行完全没用: nv.utils.windowResize(chart.update);

我将图表更新移出其中，显然这是触发时间跨度延长所需的。