在firefox中未正确加载nvd3图形

在firefox中未正确加载nvd3图形,firefox,selenium,graph,d3.js,nvd3.js,Firefox,Selenium,Graph,D3.js,Nvd3.js,有关在Firefox中未正确加载的简单示例的JSFIDLE,请参阅。它在JSFIDLE和Chrome上都能完美工作,但在Firefox中却不行 在Firefox中,它只是在图形的最左边画了一些线,即基本上在y轴上,并且说开始时间是31-12-1969 23:59:59 让我觉得Firefox创建Javascript日期的方式可能有所不同?长裙 有人能解释为什么会这样吗 代码如下: nv.addGraph(function() { var chart = nv.models.li

有关在Firefox中未正确加载的简单示例的JSFIDLE,请参阅。它在JSFIDLE和Chrome上都能完美工作,但在Firefox中却不行

在Firefox中,它只是在图形的最左边画了一些线,即基本上在y轴上,并且说开始时间是31-12-1969 23:59:59

让我觉得Firefox创建Javascript日期的方式可能有所不同?长裙

有人能解释为什么会这样吗

代码如下:

   nv.addGraph(function() {
      var chart = nv.models.lineChart()
        .margin({left: 100, bottom: 120})  
        .useInteractiveGuideline(true)  
        .transitionDuration(350)  
        .showLegend(true)       
        .showYAxis(true)        
        .showXAxis(true);

      chart.xAxis 
        .rotateLabels(-45)
        .tickFormat(function(d) { return d3.time.format('%d-%m-%Y %H:%M:%S')(new Date(d)) });

      chart.yAxis
        .axisLabel('Latency (ms)')
        .tickFormat(d3.format('.0f'));

      var service1Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":100},{"x":"2014-03-03 11:00:00 UTC","y":200},{"x":"2014-03-03 20:00:00 UTC","y":50}],"key":"service1","color":"#ff7f0e"};
      var service2Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":200},{"x":"2014-03-03 11:00:00 UTC","y":300}],"key":"service2","color":"#3c9fad"};


      // Make the dates easy for d3 to work with
      service1Data["values"].forEach(function(hash) {
        hash["x"] = new Date(hash["x"]);
      });

      service2Data["values"].forEach(function(hash) {
        hash["x"] = new Date(hash["x"]);
      });

      var serviceData = [service1Data, service2Data];

      d3.select('#chart_latency svg')    
        .datum(serviceData)         
        .call(chart);

      //Update the chart when window resizes.
      nv.utils.windowResize(function() { chart.update() });
      return chart;
    });

您依赖于浏览器的内部命令来根据字符串创建日期,因此也依赖于浏览器的内部命令。尽管Chrome能够识别出你的非标准日期字符串,Firefox却不能

您可以通过使用进行日期分析来避免歧义:

var dateFormatIn =  d3.time.format.utc('%Y-%m-%d %H:%M:%S UTC');

  service2Data["values"].forEach(function(hash) {
    hash["x"] =  dateFormatIn.parse(hash["x"]);
  });

顺便说一下,您可以在图表对象上设置一个x-accessor函数,而不是使用for循环遍历数据数组并解析日期:

      var chart = nv.models.lineChart()
            .x(function(d){return dateFormatIn.parse(d.x);})

这看起来像是你的时间戳问题。以什么方式?日期在JSFIDLE和Chrome上工作。我已经更新了小提琴,这样它可以把日期记录到控制台上,你可以看到它们被正确地创建了。谢谢!这非常有效,让我重构了大量代码。