将数据从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中

回答

相关问题