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

Question

Dux 차트를 Nuxt 프레임 워크에 통합하려고합니다. (Nuxt가 매우 새로 도입되었습니다.) 여러 CSV 파일을 만드는 방법이 있습니다. DOM에서 D3에 의해 그래프로 표시 할 수 있습니다.

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

노력으로 증명 (나를 위해)가 Nuxt.js 프레임 워크에서이 간단한 기능을 수행 : 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을 사용할 수 없습니다 : 우선은 스크립트의 mounted: 섹션에서 d3.csv 기능을 사용하여로드했습니다. 그 짐 이후 로요?

Vuex 스토어가 일을 할 수도 있지만 내 인생에서 CSV를로드하고 프로그램이로드 될 CSV 파일을 기다리는 올바른 구문을 찾을 수 없습니다.

Nuxt에서 이와 같은 데이터 파일을로드 할 수있는 표준 방법이 있습니까? 누군가 내가 비슷한 것을 배울 수 있다면 더 좋을 것입니다.

Answer 1

답을 제공 한 것에 대해 Sebastian Kolinks에게 감사드립니다. 문제는 d3.csv 함수가 Vue.js에서 컨텍스트를 훔쳐서 this을 자체 버전으로 덮어 쓰는 것이 었습니다. this 자체가없는 화살표 함수를 사용하여

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

이 문제를 해결 하였다.

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

세바스찬의 예제 코드는 https://jsfiddle.net/L6osr9ve/

에있다