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

Question

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

我在上面的 plnkr 中有最新的 d3 和 nvd3 库。当您第一次查看图表时，您会注意到所有时间跨度刻度 09:00、08:30、08:00 等都在左侧 x 轴上彼此重叠 squished/overlaid。

现在，除非用户单击图表下方的时间范围查找器或调整 window 的大小，否则时间跨度不会正确地拉伸图表的长度。

目前图表在第一次加载时看起来像这样：

什么时候应该是这样的：

知道我哪里出错了吗？我在这里 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);

我将 chart.update 移出，显然这是触发时间跨度延长所需要的。

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

How to force the nvd3 chart timespan to stretch the width of the chart?

javascript

charts

d3.js

angularjs

nvd3.js