로딩 CSV는 개별 막대 차트

Question

를 만들기 위해 나는 다음과 같은 CSV 파일이 : 나는 이산 막대 차트를 만들기 위해 nvd3에로드하고 싶습니다

Fun,Stupid,Yes,No 
50,-20,100,70 

합니다. 나는 그것이 쉽다는 것을 알고있다. 그러나 그것은 데이터를 조작하기 위해 오랫동안 나를 데려 가고있다.

나는 다음 시도했다 :

d3.csv("/path/to/file", function(data){ 
       console.log(data); 
       }); 

나는 nvd3 작동하지 않습니다 다음 개체 수 :

[{Fun:50, Stupid: -20, Yes: 100, No: 70}] 

감사합니다.

Answer 1

nvd3은 매우 구체적인 데이터 형식을 필요로하므로 데이터를 해당 형식으로 가져와야합니다. 이 기대되는 양식은 다음과 같습니다 빈 배열이 d3.csv에서 개체 가득하고 네바다주의한다

[ 
    { 
     key: "totals", 
     values: [] 
    } 
]; 

은 객체의 배열의 이름이 값 호출 할를 기대 입니다 .

var exampleData = [ { key: "totals", values: [] } ]; 

는 그런 다음 데이터로 채우기 :이 모든 당신의 d3.csv 호출 내에서 할 필요가

data.forEach(function (d){ 
    d.value = +d.value 
    exampleData[0].values.push(d) 
})  

그래서 첫 번째 단계는이 같은 빈 개체를 만드는 것입니다.

당신이 당신의 CSV 파일이 다른 같은 하나의 열에서 당신의 이름과 당신의 가치와 컬럼으로 구성되어 있어야합니다이 형식을 사용하려면

라벨,

재미, 50

바보 값을 , -20

그리고 working example

에 대한 링크가 있습니다.