如何使用 vue.js 和 d3.js 加载 csv 文件答案

【问题标题】：how to load csv file with vue.js and d3.js如何使用 vue.js 和 d3.js 加载 csv 文件
【发布时间】：2020-10-29 15:08:50
【问题描述】：

我正在尝试将一个小的 csv 文件加载到 Vue 文件中。据我了解，有两种方法：一种是fetch，如果文件很大，另一种是import，如果文件很小。我的 csv 很小，我想使用 import 将文件与 Vue 一起使用。但是，数据集没有加载，我无法控制台记录它。它显示“未找到引用错误“变量名”的错误。变量名是我的 csv 文件中的变量名。我对Vue很陌生，希望有人能提供帮助！

这是我的代码：

<template>
  <div id="app">
  </div>
</template>

<script>
import dataset from '../public/dataset.csv';
import * as d3 from 'd3';

let data = d3.csvParse(dataset);

export default {
  data() {
    return {
      dataset: []
    }
  },
  async mounted() {
    console.log(data)
  }
}
</script>

<style>

</style>

【问题讨论】：

标签： javascript vue.js d3.js

【解决方案1】：

您不能在数据函数之外声明数据变量。因此，将该变量带入数据函数，更改其名称，然后创建一个函数并使用这一行 d3.csvParse(dataset);在那里，将其分配给变量 this.dataset。在挂载的钩子中调用该函数，然后 console.log this.dataset 变量。

【讨论】：