2017-04-05 22 views
0

我有一個折線圖nvd3。 它正常工作時,我有少點,但我得到一個JavaScript錯誤,當我有更多的點:nvd3太多積分失敗 - 無法讀取屬性'x'null

Cannot read property 'x' of null 

下面是更多的數據的情況下,全HTML中失敗:

<!DOCTYPE html> 
 
    <html lang="en"> 
 
     <head> 
 
      <meta charset="utf-8" /> 
 
      <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" /> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script> 
 
     </head> 
 
     <body> 
 
      
 
     <div id="coverage"><svg style="width:1200px;height:400px;"></svg></div> 
 
     <script> 
 
       coverage=[{"values": [{"y": 0.1, "x": 0}, {"y": 0.1, "x": 1}, {"y": 0.1, "x": 2}, {"y": 0.1, "x": 3}, {"y": 0.1, "x": 4}, {"y": 0.1, "x": 5}, {"y": 0.1, "x": 6}, {"y": 0.1, "x": 7}, {"y": 0.1, "x": 8}, {"y": 0.1, "x": 9}, {"y": 0.1, "x": 10}, {"y": 0.1, "x": 11}, {"y": 0.1, "x": 12}, {"y": 0.1, "x": 13}, {"y": 0.1, "x": 14}, {"y": 0.1, "x": 15}, {"y": 0.1, "x": 16}, {"y": 0.1, "x": 17}, {"y": 0.1, "x": 18}, {"y": 0.1, "x": 19}, {"y": 0.1, "x": 20}, {"y": 0.1, "x": 21}, {"y": 0.1, "x": 22}, {"y": 0.1, "x": 23}, {"y": 0.1, "x": 24}, {"y": 0.1, "x": 25}, {"y": 0.1, "x": 26}, {"y": 0.1, "x": 27}, {"y": 0.1, "x": 28}, {"y": 0.1, "x": 29}, {"y": 0.1, "x": 30}, {"y": 0.1, "x": 31}, {"y": 0.1, "x": 32}, {"y": 0.1, "x": 33}, {"y": 0.1, "x": 34}, {"y": 0.1, "x": 35}, {"y": 0.1, "x": 36}, {"y": 0.1, "x": 37}, {"y": 0.1, "x": 38}, {"y": 0.1, "x": 39}, {"y": 0.1, "x": 40}, {"y": 0.1, "x": 41}, {"y": 0.1, "x": 42}, {"y": 0.1, "x": 43}, {"y": 0.1, "x": 44}, {"y": 0.1, "x": 45}, {"y": 0.1, "x": 46}, {"y": 0.1, "x": 47}, {"y": 0.1, "x": 48}, {"y": 0.1, "x": 49}], "key": "qq003.1.3", "yAxis": "1"}, {"values": [{"y": 0.1, "x": 0}, {"y": 0.1, "x": 1}, {"y": 0.1, "x": 2}, {"y": 0.1, "x": 3}, {"y": 0.1, "x": 4}, {"y": 0.1, "x": 5}, {"y": 0.1, "x": 6}, {"y": 0.1, "x": 7}, {"y": 0.1, "x": 8}, {"y": 0.1, "x": 9}, {"y": 0.1, "x": 10}, {"y": 0.1, "x": 11}, {"y": 0.1, "x": 12}, {"y": 0.1, "x": 13}, {"y": 0.1, "x": 14}, {"y": 0.1, "x": 15}, {"y": 0.1, "x": 16}, {"y": 0.1, "x": 17}, {"y": 0.1, "x": 18}, {"y": 0.1, "x": 19}, {"y": 0.1, "x": 20}, {"y": 0.1, "x": 21}, {"y": 0.1, "x": 22}, {"y": 0.1, "x": 23}, {"y": 0.1, "x": 24}, {"y": 0.1, "x": 25}, {"y": 0.1, "x": 26}, {"y": 0.1, "x": 27}, {"y": 0.1, "x": 28}, {"y": 0.1, "x": 29}, {"y": 0.1, "x": 30}, {"y": 0.1, "x": 31}, {"y": 0.1, "x": 32}, {"y": 0.1, "x": 33}, {"y": 0.1, "x": 34}, {"y": 0.1, "x": 35}, {"y": 0.1, "x": 36}, {"y": 0.1, "x": 37}, {"y": 0.1, "x": 38}, {"y": 0.1, "x": 39}, {"y": 0.1, "x": 40}, {"y": 0.1, "x": 41}, {"y": 0.1, "x": 42}, {"y": 0.1, "x": 43}, {"y": 0.1, "x": 44}, {"y": 0.1, "x": 45}, {"y": 0.1, "x": 46}, {"y": 0.1, "x": 47}, {"y": 0.1, "x": 48}, {"y": 0.1, "x": 49}], "key": "qq003.1.67", "yAxis": "1"}, {"values": [{"y": 247677.0, "x": 0}, {"y": 250012.0, "x": 1}, {"y": 287416.0, "x": 2}, {"y": 327385.0, "x": 3}, {"y": 276739.0, "x": 4}, {"y": 247264.0, "x": 5}, {"y": 234246.0, "x": 6}, {"y": 252476.0, "x": 7}, {"y": 263584.0, "x": 8}, {"y": 244878.0, "x": 9}, {"y": 263238.0, "x": 10}, {"y": 223955.0, "x": 11}, {"y": 147838.0, "x": 12}, {"y": 216088.0, "x": 13}, {"y": 219334.0, "x": 14}, {"y": 464921.0, "x": 15}, {"y": 253147.0, "x": 16}, {"y": 143214.0, "x": 17}, {"y": 263756.0, "x": 18}, {"y": 289643.0, "x": 19}, {"y": 219631.0, "x": 20}, {"y": 280396.0, "x": 21}, {"y": 228272.0, "x": 22}, {"y": 205129.0, "x": 23}, {"y": 277684.0, "x": 24}, {"y": 336930.0, "x": 25}, {"y": 206536.0, "x": 26}, {"y": 184942.0, "x": 27}, {"y": 288391.0, "x": 28}, {"y": 265598.0, "x": 29}, {"y": 214029.0, "x": 30}, {"y": 205708.0, "x": 31}, {"y": 238413.0, "x": 32}, {"y": 173776.0, "x": 33}, {"y": 231737.0, "x": 34}, {"y": 189285.0, "x": 35}, {"y": 299765.0, "x": 36}, {"y": 254324.0, "x": 37}, {"y": 231075.0, "x": 38}, {"y": 425653.0, "x": 39}, {"y": 344885.0, "x": 40}, {"y": 394357.0, "x": 41}, {"y": 184156.0, "x": 42}, {"y": 251984.0, "x": 43}, {"y": 236977.0, "x": 44}, {"y": 280948.0, "x": 45}, {"y": 305699.0, "x": 46}, {"y": 249000.0, "x": 47}, {"y": 281287.0, "x": 48}, {"y": 247748.0, "x": 49}], "key": "qq001.2.047", "yAxis": "1"}]; 
 
    
 
    
 
      nv.addGraph(function() { 
 
      var chart = nv.models.lineChart(); 
 
    
 
      chart.margin({top: 30, right: 60, bottom: 100, left: 60}); 
 
    
 
      var datum = coverage; 
 
        chart.xAxis 
 
        .rotateLabels(-25).tickFormat(d3.format(',.1f')); 
 
       chart.yAxis 
 
        .axisLabel('Coverage').tickFormat(d3.format(',.02f')); 
 
    
 
       chart.showLegend(true); 
 
       d3.select('#coverage svg') 
 
       .datum(datum) 
 
       .transition().duration(500) 
 
       .attr('width', 1200) 
 
       .attr('height', 400) 
 
       .call(chart); 
 
      }); 
 
    
 
     </script> 
 
    
 
     </body> 
 
    </html>

有誰知道如何解決這個問題?

回答

1

這可能是因爲你在三個系列中有相同的點。參考https://github.com/novus/nvd3/issues/873

嘗試使用useVoronoi(false);

<!DOCTYPE html> 
 
    <html lang="en"> 
 
     <head> 
 
      <meta charset="utf-8" /> 
 
      <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" /> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script> 
 
     </head> 
 
     <body> 
 
      
 
     <div id="coverage"><svg style="width:1200px;height:400px;"></svg></div> 
 
     <script> 
 
       coverage=[{"values": [{"y": 0.2, "x": 0}, {"y": 0.1, "x": 1}, {"y": 0.1, "x": 2}, {"y": 0.1, "x": 3}, {"y": 0.1, "x": 4}, {"y": 0.1, "x": 5}, {"y": 0.1, "x": 6}, {"y": 0.1, "x": 7}, {"y": 0.1, "x": 8}, {"y": 0.1, "x": 9}, {"y": 0.1, "x": 10}, {"y": 0.1, "x": 11}, {"y": 0.1, "x": 12}, {"y": 0.1, "x": 13}, {"y": 0.1, "x": 14}, {"y": 0.1, "x": 15}, {"y": 0.1, "x": 16}, {"y": 0.1, "x": 17}, {"y": 0.1, "x": 18}, {"y": 0.1, "x": 19}, {"y": 0.1, "x": 20}, {"y": 0.1, "x": 21}, {"y": 0.1, "x": 22}, {"y": 0.1, "x": 23}, {"y": 0.1, "x": 24}, {"y": 0.1, "x": 25}, {"y": 0.1, "x": 26}, {"y": 0.1, "x": 27}, {"y": 0.1, "x": 28}, {"y": 0.1, "x": 29}, {"y": 0.1, "x": 30}, {"y": 0.1, "x": 31}, {"y": 0.1, "x": 32}, {"y": 0.1, "x": 33}, {"y": 0.1, "x": 34}, {"y": 0.1, "x": 35}, {"y": 0.1, "x": 36}, {"y": 0.1, "x": 37}, {"y": 0.1, "x": 38}, {"y": 0.1, "x": 39}, {"y": 0.1, "x": 40}, {"y": 0.1, "x": 41}, {"y": 0.1, "x": 42}, {"y": 0.1, "x": 43}, {"y": 0.1, "x": 44}, {"y": 0.1, "x": 45}, {"y": 0.1, "x": 46}, {"y": 0.1, "x": 47}, {"y": 0.1, "x": 48}, {"y": 0.1, "x": 49}], "key": "qq003.1.3", "yAxis": "1"}, {"values": [{"y": 0.1, "x": 0}, {"y": 0.1, "x": 1}, {"y": 0.1, "x": 2}, {"y": 0.1, "x": 3}, {"y": 0.1, "x": 4}, {"y": 0.1, "x": 5}, {"y": 0.1, "x": 6}, {"y": 0.1, "x": 7}, {"y": 0.1, "x": 8}, {"y": 0.1, "x": 9}, {"y": 0.1, "x": 10}, {"y": 0.1, "x": 11}, {"y": 0.1, "x": 12}, {"y": 0.1, "x": 13}, {"y": 0.1, "x": 14}, {"y": 0.1, "x": 15}, {"y": 0.1, "x": 16}, {"y": 0.1, "x": 17}, {"y": 0.1, "x": 18}, {"y": 0.1, "x": 19}, {"y": 0.1, "x": 20}, {"y": 0.1, "x": 21}, {"y": 0.1, "x": 22}, {"y": 0.1, "x": 23}, {"y": 0.1, "x": 24}, {"y": 0.1, "x": 25}, {"y": 0.1, "x": 26}, {"y": 0.1, "x": 27}, {"y": 0.1, "x": 28}, {"y": 0.1, "x": 29}, {"y": 0.1, "x": 30}, {"y": 0.1, "x": 31}, {"y": 0.1, "x": 32}, {"y": 0.1, "x": 33}, {"y": 0.1, "x": 34}, {"y": 0.1, "x": 35}, {"y": 0.1, "x": 36}, {"y": 0.1, "x": 37}, {"y": 0.1, "x": 38}, {"y": 0.1, "x": 39}, {"y": 0.1, "x": 40}, {"y": 0.1, "x": 41}, {"y": 0.1, "x": 42}, {"y": 0.1, "x": 43}, {"y": 0.1, "x": 44}, {"y": 0.1, "x": 45}, {"y": 0.1, "x": 46}, {"y": 0.1, "x": 47}, {"y": 0.1, "x": 48}, {"y": 0.1, "x": 49}], "key": "qq003.1.67", "yAxis": "1"}, {"values": [{"y": 247677.0, "x": 0}, {"y": 250012.0, "x": 1}, {"y": 287416.0, "x": 2}, {"y": 327385.0, "x": 3}, {"y": 276739.0, "x": 4}, {"y": 247264.0, "x": 5}, {"y": 234246.0, "x": 6}, {"y": 252476.0, "x": 7}, {"y": 263584.0, "x": 8}, {"y": 244878.0, "x": 9}, {"y": 263238.0, "x": 10}, {"y": 223955.0, "x": 11}, {"y": 147838.0, "x": 12}, {"y": 216088.0, "x": 13}, {"y": 219334.0, "x": 14}, {"y": 464921.0, "x": 15}, {"y": 253147.0, "x": 16}, {"y": 143214.0, "x": 17}, {"y": 263756.0, "x": 18}, {"y": 289643.0, "x": 19}, {"y": 219631.0, "x": 20}, {"y": 280396.0, "x": 21}, {"y": 228272.0, "x": 22}, {"y": 205129.0, "x": 23}, {"y": 277684.0, "x": 24}, {"y": 336930.0, "x": 25}, {"y": 206536.0, "x": 26}, {"y": 184942.0, "x": 27}, {"y": 288391.0, "x": 28}, {"y": 265598.0, "x": 29}, {"y": 214029.0, "x": 30}, {"y": 205708.0, "x": 31}, {"y": 238413.0, "x": 32}, {"y": 173776.0, "x": 33}, {"y": 231737.0, "x": 34}, {"y": 189285.0, "x": 35}, {"y": 299765.0, "x": 36}, {"y": 254324.0, "x": 37}, {"y": 231075.0, "x": 38}, {"y": 425653.0, "x": 39}, {"y": 344885.0, "x": 40}, {"y": 394357.0, "x": 41}, {"y": 184156.0, "x": 42}, {"y": 251984.0, "x": 43}, {"y": 236977.0, "x": 44}, {"y": 280948.0, "x": 45}, {"y": 305699.0, "x": 46}, {"y": 249000.0, "x": 47}, {"y": 281287.0, "x": 48}, {"y": 247748.0, "x": 49}], "key": "qq001.2.047", "yAxis": "1"}]; 
 
    
 
    
 
      nv.addGraph(function() { 
 
      var chart = nv.models.lineChart(); 
 
    
 
      chart.margin({top: 30, right: 60, bottom: 100, left: 60}); 
 
    
 
      var datum = coverage; 
 
        chart.xAxis 
 
        .rotateLabels(-25).tickFormat(d3.format(',.1f')); 
 
       chart.yAxis 
 
        .axisLabel('Coverage').tickFormat(d3.format(',.02f')); 
 
    
 
       chart.showLegend(true).useVoronoi(false); 
 
       d3.select('#coverage svg') 
 
       .datum(datum) 
 
       .transition().duration(500) 
 
       .attr('width', 1200) 
 
       .attr('height', 400) 
 
       .call(chart); 
 
      }); 
 
    
 
     </script> 
 
    
 
     </body> 
 
    </html>

+0

大。這解決了它。還注意到升級到1.8版本的nvd3會修復它... – max