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

Question

我正在尝试从 CSV 文件加载数据并使用 lineWithFocusChart 模型将其呈现给 D3 图表。我是 D3 图表的新手，但能够理解基础知识的工作原理并通过示例。

这是我的代码：

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 中的数据非常简单（假设加载 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() 函数的 return，但数据尚未加载，这就是您成为 'undefined' 的原因。

希望对您有所帮助。

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

Loading data from a CSV file to a lineWithFocusChart in D3

csv

d3.js

nvd3.js