在 Nuxt.js 框架中导入 CSV 文件以供 D3 处理

Question

我正在尝试将 D3 图表集成到 Nuxt 框架中（我对 Nuxt 还很陌生），我遇到的一个问题运行是如何使多个 CSV 文件可供 DOM 由 D3 绘制。在 D3 中，这是对 CSV 函数的简单调用：

 d3.csv('myData.csv, function (error, myData) {
    if (error) throw error }

在 Nuxt.js 框架中执行这个简单的功能被证明是一项艰苦的工作（对我来说）。首先，我尝试使用脚本 mounted: 部分中的 d3.csv 函数加载它们：

<script>
  import * as d3 from 'd3'
  export default {
    mounted () { 
      d3.csv('myData.csv, function (error, myData) {
         if (error) throw error }
      }
    }
</script>

但以这种方式加载时，变量 myData 或 this.myData 都不可用于 DOM。我猜是因为之后会加载？

Vuex 商店似乎可以完成这项工作，但对于我来说，我找不到正确的语法来加载 CSV 并确保程序等待 CSV 文件加载。

在 Nuxt 中是否有一种规范的方式来加载这样的数据文件？如果有人能指出一个类似的例子，我可以从中学习，那就更好了？

Answer 1

感谢 Sebastian Kolinks 提供答案。问题是 d3.csv 函数正在窃取 Vue.js 的上下文，用它自己的版本覆盖 this。

d3.csv('myData.csv', function (myData) {
  this.myArray = freqData  // throws "this" is undefined error
})

通过使用自己没有的箭头函数 this，问题解决了。

d3.csv('myData.csv', (myData) => {
    this.myArray = freqData   
  })

Sebastian 的示例代码位于 https://jsfiddle.net/L6osr9ve/

在 Nuxt.js 框架中导入 CSV 文件以供 D3 处理

Import CSV files in Nuxt.js framework for processing by D3

javascript

csv

d3.js

vuex

nuxt.js