Question

我尝试从CSV文件加载数据并使用lineWithFocusChart模型将其显示到D3图表。我是D3图表的新手，但能够理解基础知识的工作原理并完成了这些示例。

这是我的代码：

＆＃13;

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;;
}

＆＃13;

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

＆＃13;

我的CSV中的数据非常简单（它假设要加载ECG数据）：

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

我收到错误：

Uncaught TypeError: Cannot read property 'map' of undefined

并且图表甚至无法加载。

任何人都可以帮助我。

Answer 1

loadData（）。map（.....）应该在d3.csv（“/ data / datademo.csv”.......）的回调函数中。

您现在正在尝试使用loadData（）函数的返回，但数据尚未加载，这就是您“未定义”的原因。

我希望它有所帮助。

将数据从CSV文件加载到D3中的lineWithFocusChart

1 个答案: