NVD3库 - 折线和条形图 - 条形图在窗口调整大小之前不会加载

Question

我正在尝试使用NVD3 javascript库创建线条和条形图。我有一个有趣的问题，线条加载完全正常，但在初始页面加载时省略了条形。但是，一旦我调整窗口大小或在图表中执行检查元素，条形图就会加载。

这是我的代码：

// raw @timeline is just JSON
// This is a rails app
var timeline = <%=raw @timeline %> 
  var chart_concurrent_users_data = [
    {
      values: timeline.map(function(d) { return {x: d[0], y: d[1] } }),
      key: 'Concurrent Users',
      color: '#C0C0C0',
      yAxis: 2,
      bar: true
    },
    {
      values: timeline.map(function(d) { return {x: d[0], y: d[2] } }),
      key: 'User Joins',
      color: '#5cb85c',
      yAxis: 1
    },
    {
      values: timeline.map(function(d) { return {x: d[0], y: d[3] } }),
      key: 'User Leaves',
      color: '#006699',
      yAxis: 1
    }
  ];
  // User Chart / Leave / Joins
  nv.addGraph(function() {
    var chart_users = nv.models.linePlusBarChart()
      .margin({top: 30, right: 80, bottom: 50, left: 80})
      .color(d3.scale.category10().range());

    // FULL Graph
    chart_users.xAxis.tickFormat(function(d) {
      return d ? d3.time.format('%H:%M%')(new Date(d)) : '';
    });

    chart_users.xAxis.axisLabel('Time');

    chart_users.y2Axis
      .axisLabel('Users joining / leaving')
      .tickFormat(d3.format(',.'));

    chart_users.y1Axis
      .axisLabel('Concurrent Users')
      .tickFormat(d3.format(',.'));

    chart_users.bars.forceY([0]);

    chart_users.lines.forceY([0]);

    d3.select('#chart_users svg')
        .datum(chart_concurrent_users_data)
        .call(chart_users);

    nv.utils.windowResize(chart_users.update);

    return chart_users;
 });

我已经在chrome和firefox中对此进行了测试。

以下是该问题的一些图片。

初始加载时：

调整大小后：

注意我也可以将其调整为全屏，条形图仍然存在。非常感谢任何想法。