将数据从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
并且图表甚至没有加载。
任何人都可以帮助我。
loadData()。map(.....)应该在d3.csv(“/ data/datademo.csv”.......)的回调函数中。
您现在正在尝试使用loadData()函数的返回值,但数据尚未加载,这就是为什么您变成'未定义'的原因。
我希望它有帮助。
嗨@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
即使使用硬编码值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