D3.js/NVD3.js不顯示正確的值

Question

我是D3.js和NVD3.js的新手。我創建了一個多行圖表來顯示統計信息。 y軸和圖表內顯示的數字僅爲整數。

但是，它不顯示數據集中的正確值。的JSON輸入看起來像這樣：

[{"key":"Anmeldungen","values":[[1446505200,92],[1447023600,112],[1447542000,361],[1448665200,6],[1449183600,10],[1449788400,2],[1449961200,3],[1450738800,4],[1451343600,9],[1451689200,2],[1452294000,7],[1452380400,5],[1453330800,7],[1453849200,2],[1454540400,4],[1454799600,7]]},{"key":"Abmeldungen ","values":[[1446505200,223],[1447023600,264],[1447542000,82],[1448665200,0],[1449183600,0],[1449788400,0],[1449961200,0],[1450738800,0],[1451343600,0],[1451689200,0],[1452294000,0],[1452380400,0],[1453330800,2],[1453849200,0],[1454540400,0],[1454799600,0]]}] 

值的第一個數字是一個時間戳，即圖表中正確顯示。第二個數字是我遇到的整數值。

用於呈現圖表的代碼如下：

var $json = JSON.parse($json); 
nv.addGraph(function() { 
    data = $json; 
    var chart = nv.models.cumulativeLineChart() 
      .x(function (d) { 
       return d[0]*1000 //timestamp 
      }) 
      .y(function (d) { 
       console.log(d); //<--Outputs correct number 
       return d[1] 
      }) 
      .color(d3.scale.category10().range()) 
      .useInteractiveGuideline(true) 
     ; 

    chart.xAxis 
     .tickFormat(function(d) { 
      return d3.time.format('%d.%m.%Y')(new Date(d)) 
     }); 

    chart.yAxis 
     .tickFormat(d3.format('d')); 

    console.log(data); // <-- still has the correct data 

    d3.select('.diagrammContainer svg').datum(data).call(chart); 

    return chart; 
}); 

我還試圖改變

chart.yAxis 
     .tickFormat(d3.format('d')); 

到

chart.yAxis 
     .tickFormat(d3.format(',f')); 

其顯示在y軸上的浮點數。但是這些值仍然不正確。我也不明白爲什麼它會將一些數字轉換爲負數。

代碼中的兩個console.log都輸出正確的值。 D3.js/NVD3.js對圖表的數字做了什麼？ result

Answer 1

因此，在嘗試調試一段時間後，我做了一些Google搜索。這些是我的兩個發現：

• 你應該對象，而不是數組創建圖表的數據的價值，所以不是{"key":"Anmeldungen","values":[[1446505200,92],...，你要..."values":[{ x: 1446505200, y: 92},...。在更改此項時，還需要更改.x()和.y()函數以分別返回d.x*1000和d.y。

• 顯然Y值由nvd3累積線圖is a known issue處理不當，但如果你將其更改爲線型圖代替（即。var chart = nv.models.cumulativeLineChart()至var chart = nv.models.lineChart()），它會正確解析y值。

我把創建一個片段演示如何用{x:_, y:_}對象替換數據值陣列工作的自由和here is a jsfiddle我從一個在GitHub的問題線程與您的數據修改，如果你想玩弄它。

var data = [{"key":"AN","values":[[1446505200,92],[1447023600,112],[1447542000,361],[1448665200,6],[1449183600,10],[1449788400,2],[1449961200,3],[1450738800,4],[1451343600,9],[1451689200,2],[1452294000,7],[1452380400,5],[1453330800,7],[1453849200,2],[1454540400,4],[1454799600,7]]},{"key":"AB ","values":[[1446505200,223],[1447023600,264],[1447542000,82],[1448665200,0],[1449183600,0],[1449788400,0],[1449961200,0],[1450738800,0],[1451343600,0],[1451689200,0],[1452294000,0],[1452380400,0],[1453330800,2],[1453849200,0],[1454540400,0],[1454799600,0]]}]; 
 

 
for (var i = 0; i < data.length; i++) { 
 
\t for (var j = 0; j < data[i].values.length; j++) { 
 
    \t data[i].values[j] = { 
 
    \t x: data[i].values[j][0], 
 
     y: data[i].values[j][1] 
 
    }; 
 
    } 
 
} 
 

 
console.log(data); 
 

 
window.nv.addGraph(function() { 
 
\t \t var chart = nv.models.lineChart() 
 
       .x(function(d) {return d.x*1000}) 
 
       .y(function(d) {return d.y}) 
 
\t \t \t \t .useInteractiveGuideline(true) 
 
\t \t \t \t .width($('#cumulative-test').width()) 
 
\t \t \t \t .height($('#cumulative-test').height()) 
 
\t \t \t  .color(d3.scale.category10().range()); 
 
\t 
 
\t \t \t \t chart.xAxis 
 
\t \t \t \t .tickFormat(function(d) { 
 
\t \t \t \t \t return d3.time.format('%x')(new Date(d)) 
 
\t \t \t \t }); 
 
    
 
\t \t \t \t chart.yAxis.tickFormat(d3.format('d')); 
 
\t 
 
\t \t \t \t d3.select("#cumulative-test svg").datum(getData()).call(chart); 
 
\t 
 
\t \t \t \t nv.utils.windowResize(updateChart); 
 
\t \t \t \t \t \t 
 
\t \t \t \t function updateChart() { 
 
\t \t \t \t \t chart.width($("#cumulative-test svg").width()) 
 
\t \t \t \t \t chart.height($("#cumulative-test svg").height()); 
 
\t \t \t \t \t chart.update(); 
 
\t \t \t \t } 
 
\t 
 
\t \t \t \t return chart; \t \t 
 
    
 
    function getData() { 
 
     return data; 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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.js"></script> 
 
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.css" /> 
 
<div id="cumulative-test" style="width:100%; height:50%;"> 
 
\t <svg></svg> 
 
</div>