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

【问题标题】：Import CSV files in Nuxt.js framework for processing by D3在 Nuxt.js 框架中导入 CSV 文件以供 D3 处理
【发布时间】：2017-11-24 15:17:13
【问题描述】：

我正在尝试将 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 中加载这样的数据文件？如果有人能指出一个我可以从中学习的类似例子，那就更好了？

【问题讨论】：

标签： javascript csv d3.js vuex nuxt.js

【解决方案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/

【讨论】：