ChartJS无法与CSV源的D3合作

Question

我正在尝试从我的Raspberry Pi加载一个由两个列组成的CSV文件，并使用Chartjs制作图表。在某些教程中，我发现我可以使用D3做到这一点，但是看来我在承诺上做错了什么。

var csv = `
21:34:03,17.25
21:35:04,17.18
21:36:03,17.18
21:37:03,17.18
21:38:03,17.18
21:39:03,17.18
21:40:03,17.18
21:41:03,17.12
21:42:03,17.18
21:43:03,17.12
21:44:03,17.12
21:46:03,17.12
21:47:02,17.12
21:48:03,17.12
21:49:02,17.12
21:50:03,17.06
21:51:03,17.06
21:52:03,17.06
21:53:03,17.06
21:54:03,17.06
21:55:04,17.06
21:56:03,17.06
21:57:02,17.06
21:58:03,17.06
22:00:04,17.00
22:01:02,17.00`;

//couldn't find a way to embed the csv into  the text function for the snippet

d3.text("temp.csv").then(makeChart);

function makeChart(temp) {
  var result = "x, y\n" + temp; //now you have the header
  var datos = d3.csvParse(result);
  var chart = new Chart('chart', {
    type: 'line',
    data: {
      labels: datos.x,
      datasets: [{
        data: datos.y
      }]
    }
  });
  console.log(this.chart.data);
  return this.chart;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

示例数据（应该是TEMP.CSV）：

21:34:03,17.25
21:35:04,17.18
21:36:03,17.18
21:37:03,17.18
21:38:03,17.18
21:39:03,17.18
21:40:03,17.18
21:41:03,17.12
21:42:03,17.18
21:43:03,17.12
21:44:03,17.12
21:46:03,17.12
21:47:02,17.12
21:48:03,17.12
21:49:02,17.12
21:50:03,17.06
21:51:03,17.06
21:52:03,17.06
21:53:03,17.06
21:54:03,17.06
21:55:04,17.06
21:56:03,17.06
21:57:02,17.06
21:58:03,17.06
22:00:04,17.00
22:01:02,17.00

我不知道要添加什么，但是我发现的唯一解决方法是完全摆脱D3，尽管我想了解如何在此示例中使用其承诺。

Answer 1

您的承诺还可以（即d3.text（“ temp.csv”）。然后（makechart）;），但是您在makechart中的逻辑有一些问题：

1. 删除空间在，和y您添加的标头之间 - 否则，它创建了像这样的对象键“ y”，而不仅仅是y
2. y值需要转换为float，因为csvparse默认为文本，而无需转换函数
3. datos.x.x and <代码> datos.y 不要将任何内容都称为datos没有特定的x和y键 - 它是它的数组对象，每个对象具有X和y键。 的这些键的数组

因此，您可以使用MAP来提取以下工作示例

：

var url = "https://gist.githubusercontent.com/robinmackenzie/ff787ddb871cef050d7e6279991a0f07/raw/4ce35de3a9bef27363d83e7da2f3365ffa8d2345/data.csv";

d3.text(url)
  .then(csv => makeChart(csv))
  
function makeChart(temp) {
  // add the header (no space between , and y
  var result = "x,y\n" + temp; //now you have the header

  // csv parse - need to convert y values to float
  var datos = d3.csvParse(result, d => {
    return {
      x: d.x,
      y: parseFloat(d.y)
    }
  });

  // render chart
  var chart = new Chart('chart', {
    type: 'line',
    data: {
      labels: datos.map(d => d.x), // <-- just get x values
      datasets: [{
        data: datos.map(d => d.y) // <-- just get y values
      }]
    }
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="100"></canvas>