dc.js를 사용하여 원형 차트를 만드는 방법

Question

저는 d3 및 crossfilter를 기반으로하는 Dimensional Charting 자바 스크립트 라이브러리 dc.js를 사용하여 piechart를 만들고 있습니다. 나는 dc.js library.i에서 새롭다. csv file.i를 사용하여 piechart를 표시하려고 시도 할 때 CSV 형식을 따르는 piechart를 만드는 방법을 이해할 수 없다.

내 CSV 항목 형식은

Age_19_Under Age_19_64 Age_65_84 Age_85_and_Over 
    26.9    62.3   9.8    0.9 
    23.5    60.3   14.5    1.8 
    24.3    62.5   11.6    1.6 
    24.6    63.3   10.9    1.2 
    24.5    62.1   12.1    1.3 
    24.7    63.2   10    2.2 
    25.6    58.5   13.6    2.4 
    24.1    61.6   12.7    1.5 
    24.8    59.5   13.5    2.2 

내가 그림 다음 pieChart를 할 수 있습니다 :

Answer 1

근본적인 문제는 데이터의 유형에 대한 잘못 "모양"에 있다는 것입니다 원하는 차트. 현재 열 제목이 실제로 데이터에 있어야 원하는 항목으로 그룹화 할 수 있습니다. 나는 당신의 데이터를 재구성하는보다 우아한 방법이있을 것이라고 생각하지만 아래에 설명하는 것은 이해하기 쉬워야한다. 일단 이러한 레이블이 메타 데이터가 아닌 실제 데이터이면 나머지는 매우 간단합니다.

var experiments = [ 
    { Age_19_Under: 26.9, Age_19_64: 62.3, Age_65_84: 9.8, Age_85_and_Over: 0.9 }, 
    { Age_19_Under: 23.5, Age_19_64: 60.3, Age_65_84: 14.5, Age_85_and_Over: 1.8 }, 
    { Age_19_Under: 24.3, Age_19_64: 62.5, Age_65_84: 11.6, Age_85_and_Over: 1.6 }, 
    { Age_19_Under: 24.6, Age_19_64: 63.3, Age_65_84: 10.9, Age_85_and_Over: 1.2 }, 
    { Age_19_Under: 24.5, Age_19_64: 62.1, Age_65_84: 12.1, Age_85_and_Over: 1.3 }, 
    { Age_19_Under: 24.7, Age_19_64: 63.2, Age_65_84: 10.0, Age_85_and_Over: 2.2 }, 
    { Age_19_Under: 25.6, Age_19_64: 58.5, Age_65_84: 13.6, Age_85_and_Over: 2.4 }, 
    { Age_19_Under: 24.1, Age_19_64: 61.6, Age_65_84: 12.7, Age_85_and_Over: 1.5 }, 
    { Age_19_Under: 24.8, Age_19_64: 59.5, Age_65_84: 13.5, Age_85_and_Over: 2.2 }, 
]; 

// Reshape the data 
var categoryList = new Array(); 
experiments.forEach(function (exp) { 
    categoryList.push({ Category: "Age_19_Under", Value: exp.Age_19_Under }); 
    categoryList.push({ Category: "Age_19_64", Value: exp.Age_19_64 }); 
    categoryList.push({ Category: "Age_65_84", Value: exp.Age_65_84 }); 
    categoryList.push({ Category: "Age_85_and_Over", Value: exp.Age_85_and_Over }); 
}); 

// Setup crossfilter 
var ndx = crossfilter(categoryList); 
var categoryDim = ndx.dimension(function (d) { return d.Category; }); 
var valueSumGroup = categoryDim.group().reduceSum(function (d) { return d.Value; }); 

// Create the chart 
var pieChart = dc.pieChart("#chartid"); 
pieChart 
    .dimension(categoryDim) 
    .group(valueSumGroup) 
    .radius(100) 
; 

dc.renderAll();