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

Question

I am trying to load a small csv file into Vue file. As I understand, there are two ways of doing it: one with fetch if the file is big and another one with import if the file size if small. My csv is small and I want to use import to use the file with Vue. The dataset is not loading, however, and I can not console log it. It shows an error of "reference error "variable name"is not found". Variable name being a variable name in my csv file. I am very new to Vue, hope someone can help!

This is my code:

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

Answer 1

you can not declare data variable outside the data function. So bring that variable in data function, change its name and then make a function and use this line d3.csvParse(dataset); there, assign it to the variable this.dataset. Call that function in the mounted hook and then console.log this.dataset variable.