http://plnkr.co/edit/ymrqIOGTBqF6TVMTvC4T?p=$p$ PVIEW

我有最新的D3和nvd3库在上面的plnkr。当你第一次查看图表，你会发现，所有的时间跨度蜱九时， 8点30分， 08 等都是压扁/覆盖在左侧x轴彼此之上。

现在的时间跨度将无法正常伸展图表的长度，直到用户点击图表下面的时间测距仪，或调整窗口大小。

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

当它应该是这样的：

任何想法，我要去哪里错了吗？我发现这里这个问题 NVD3设置的扩展作为默认但答案没有对我的工作

我的nv.addGraph code

  VAR数据= [{    钥匙：价格，    色：＃4C73FF    价值观：[[1443621600000，71.89]                 [1443619800000，75.51]                 [14436.18亿，68.49]                 [1443616200000，62.72]                 [1443612600000，70.39]                 [1443610800000，59.77]}];nv.addGraph（函数（）{      VAR图= nv.models.linePlusBarChart（）          .margin（{顶：20，右：40，底部：50，左：40}）          .X（功能（D，I）{返回I}）          .Y（函数（D）{返回D [1]}）          。颜色（d3.scale.category10（）范围（））;      chart.xAxis.tickFormat（函数（D）{          变种DX =数据[0] .values​​ [D]。＆放大器;＆安培;数据[0] .values​​并[d] [0] || 0;          //在返回时间时间：          返回d3.time.format（％I：％M'）（新日期（DX））      }）;      chart.y1Axis          .tickFormat（d3.format（'F'））;      chart.y2Axis          .tickFormat（函数（D）{返回'$'+ d3.format（'F'）（D）}）;      chart.bars.forceY（[0]）;      chart.lines.interactive（假）;      chart.height（300）;      chart.noData（没有数据显示的时刻。）;      //删除的传说：      chart.showLegend（假）;      d3.select（'＃图SVG）          .datum（数据）          .transition（）。持续时间（500）          .CALL（图）      nv.utils.windowResize（chart.update）;      返回图;  }）; 

解决方案

就想通了！

  d3.select（'＃图SVG）    .datum（RES）    .transition（）。持续时间（500）    .CALL（图）chart.update（）; //＆LT;  - 需要添加此// nv.utils.windowResize（chart.update）; 

下面的路线是完全无用的： nv.utils.windowResize（chart.update）;

我感动chart.update出来了，显然这是需要触发时间跨度伸出的东西。

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

I have the latest d3 and nvd3 libraries in the plnkr above. When you first view the chart, you will notice that all the timespan ticks 09:00, 08:30, 08:00 etc are all squished/overlaid on top of each other on the left xAxis.

Now the timespans will not correctly stretch the length of the chart until the user either clicks on the time range finder below the chart, or resizes the window.

Currently the chart looks like this on first load:

When it should looks like this:

Any idea where I'm going wrong? I found this question here NVD3 Set Expanded as default however the answer did not work for me.

My nv.addGraph code

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

Just figured it out!

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

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

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

The following line was completely useless: nv.utils.windowResize(chart.update);

I moved the chart.update out of that and apparently this is what was needed to trigger the timespan to stretch out.