Question

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

我在上面的plnkr中有最新的d3和nvd3库。当您第一次查看图表时，您会注意到所有的时间跨度标记09:00，08:30，08:00等都在左侧xAxis上被压扁/叠加在一起。

现在，在用户点击图表下方的时间范围查找器或调整窗口大小之前，时间跨度将无法正确拉伸图表的长度。

目前首次加载时图表如下所示：

什么时候应该是这样的：

知道我哪里出错了吗？我在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图表时间跨度来拉伸图表的宽度？

1 个答案: