將數據從CSV文件加載到D3中的lineWithFocusChart中

我試圖從CSV文件加載數據並使用lineWithFocusChart模型將其呈現給D3圖表。我是D3圖表的新手，但能夠理解基礎知識是如何工作並通過示例的。將數據從CSV文件加載到D3中的lineWithFocusChart中

這裏是我的代碼：

nv.addGraph(function() { 
 
    var chart = nv.models.lineWithFocusChart(); 
 
chart.xAxis.tickFormat(d3.format(',f')); 
 
chart.x2Axis.tickFormat(d3.format(',f')); 
 
chart.yAxis.tickFormat(d3.format(',.2f')); 
 
chart.y2Axis.tickFormat(d3.format(',.2f')); 
 
    d3.select('#chart svg').datum(testData()).call(chart); 
 
    nv.utils.windowResize(chart.update); 
 
    return chart; 
 
}); 
 

 

 
function loadData() 
 
{ 
 
    d3.csv("/data/datademo.csv", function(error, data) { 
 
    if (error) { 
 
     console.log("ERROR: " + error) 
 
    } else { 
 
     console.log("loadData: " + data); 
 
     return data; 
 
    } 
 
    }); 
 
} 
 

 

 
function testData() { 
 
    var datasensors = loadData().map(function(data, i) { 
 
    return { 
 
     key: 'Sensor ' + i, 
 
     values: data 
 
    }; 
 
    }); 
 
    return datasensors;; 
 
}

<div id="chart"> 
 
    <svg></svg> 
 
</div>

在我的CSV數據是因爲它得到（它假設裝載的心電圖數據）一樣簡單：

x,y 
0,-69.743590 
1,0.195360 
2,0.195360 
3,-1.758242

我出現錯誤：

Uncaught TypeError: Cannot read property 'map' of undefined

並且圖表甚至沒有加載。

任何人都可以幫助我。

來源

2015-03-24 hugos

即使使用硬編碼值I獲得D3誤差的每個值（'無效值屬性變換= 「翻譯（NaN時，NAN）'」 ' 變種datasensors = [{ \t鍵：「傳感器1」， \t值：[[0.000000，-69.743590]，[0.003906,0.195360]，[0.007812,0.195360]] }，{ \t鍵：「傳感器2」， \t值：[[0.000000,108.034188] [0.003906,0.195360]，[0.007812,0.586081]] } ]; ' – hugos 2015-03-25 18:14:40

loadData（）。map（.....）應該在d3.csv（「/ data/datademo.csv」.......）的回調函數中。

您現在正在嘗試使用loadData（）函數的返回值，但數據尚未加載，這就是爲什麼您變成'未定義'的原因。

我希望它有幫助。

來源

2015-03-25 08:39:08 nipro

嗨@nipro首先，感謝您的幫助。我已經改變了loadData功能： ' 功能loadData（） { d3.csv（「/數據/ datademo.csv」，功能（數據）{ \t ECGDataSensors = data.map（函數（d）{返回[+ d [「x」]，+ d [「y」]];}）; }）; } ' 並嘗試直接創建圖表： ' d3.select（'＃chart svg'）。datum（ECGDataSensors）.call（chart）; ' 並得到消息：Uncaught TypeError：無法讀取nv.d3.js行5887中未定義的屬性'length'...我無法弄清楚爲什麼！ – hugos 2015-03-25 17:44:19

試着把'd3.select（'＃chart svg'）。datum（ECGDataSensors）.call（chart）;'在回調裏面。是這樣的： '函數loadData（）{ \t \t \t \t d3.csv（「/數據/ datademo.csv」，功能（數據）{ \t \t \t \t \t ECGDataSensors = data.map（函數（d ）{return [+ d [「x」]，+ d [「y」]];}）; \t \t \t \t \t d3。選擇（'＃chart svg'）。datum（ECGDataSensors）.call（圖表）; \t \t \t \t}）; \t \t \t}' 如果這不起作用，您可以使用完整的代碼準備JSFiddle嗎？我可以看看它。 – nipro 2015-03-26 08:07:53

嗨@nipro。謝謝你的幫助。我已經設法在回調中加載CSV數據。我現在有其他問題（視口不能用小選擇 - 更高縮放），但如果我無法修復它，我可能會嘗試其他圖表組件。我試圖加載心電圖數據，但可能D3不是最好的選擇... – hugos 2015-04-02 09:04:54

將數據從CSV文件加載到D3中的lineWithFocusChart中

回答

相關問題