D3로 처리하기 위해 Nuxt.js 프레임워크에서 CSV 파일 가져오기

D3로 처리하기 위해 Nuxt.js 프레임워크에서 CSV 파일 가져오기

저는 D3 차트를 Nuxt 프레임워크(Nuxt에 매우 생소한)에 통합하려고 하는데, 문제는 DOM에서 D3로 그래프를 그릴 수 있도록 여러 CSV 파일을 만드는 방법입니다. D3에서는 CSV 기능에 대한 간단한 호출입니다.

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

Nuxt.js 프레임워크에서 이 간단한 기능을 수행하는 것은 (저에게) 힘든 일로 판명되었습니다.먼저 저는 의 d3.csv 함수를 사용하여 로드하려고 했습니다.mounted:스크립트의 섹션:

<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에서 이와 같은 데이터 파일을 로드하는 표준적인 방법이 있습니까?누군가가 제가 배울 수 있는 유사한 예를 지적해 준다면 훨씬 더 좋겠습니까?

정답을 제공해준 세바스찬 코링크스에게 감사드립니다.문제는 그것이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   
  })

세바스찬의 예제 코드는 https://jsfiddle.net/L6osr9ve/ 에 있습니다.

언급URL : https://stackoverflow.com/questions/47476082/import-csv-files-in-nuxt-js-framework-for-processing-by-d3