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

Question

D3 및 CROSSFilter를 기반으로하는 차원 차트 JavaScript 라이브러리 DC.js를 사용하여 PieChart를 작성하고 있습니다.DC.JS Library의 새로운 기능이 있습니다. CSV 파일을 사용하여 PIChart를 표시하려고 시도합니다. CANT CSV 형식 다음에 PIChart를 만드는 방법을 이해합니다.

내 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();

.