dc.js - Выбор столбцов в CSV для визуализации диаграммы
Итак, предположим, что у меня есть.csv, который отформатирован так:
agegroup state gender score1 bin1 score2 bin2
18-25 TX F .15 1 .20 3
18-25 FL F .34 4 .11 7
65+ CA M .72 3 .33 9
46-54 TX M .90 6 .08 1
46-54 TX F .15 1 .11 7
Прямо сейчас я могу создать две столбчатые диаграммы для столбцов, bin1 и bin2. У меня также есть дисплей, который будет суммировать очки 1 и 2.
Однако, поскольку я добавляю больше партитур и ячеек, я не хочу создавать все больше и больше гистограмм и отображений для каждого добавленного столбца. Так что, если новый CSV выглядит так:
agegroup state gender score1 bin1 score2 bin2 score3 bin3 score4 bin4
18-25 TX F .15 1 .20 3 .51 2 .23 6
18-25 FL F .34 4 .11 7 .79 1 .64 4
65+ CA M .72 3 .33 9 .84 7 .55 3
46-54 TX M .90 6 .08 1 .15 2 .47 5
46-54 TX F .15 1 .11 7 .76 8 .09 8
Можно ли каким-либо образом создать раскрывающийся список или что-то, что сообщит dc.js, из каких столбцов (в данном случае, bin1 - bin4) нужно создать диаграммы и чтобы на реактивном дисплее отображались правильные суммы?
1 ответ
Вы можете обновить группу на графике и отобразить ее.
var groups = {
bin1: dim.group().reduceSum(function(d) {
return d.bin1;
}),
bin2: dim.group().reduceSum(function(d) {
return d.bin2;
})
};
var chart = dc.barChart("#chart")
.width(400)
.height(200)
.x(d3.scale.linear().domain([1, 4]))
.dimension(dim)
.group(groups.bin1);
chart.render();
function changeBin (binNum) {
chart.group(groups[binNum]);
chart.render();
}
И рабочий пример с использованием двух кнопок:
var data = [{
x: 1,
bin1: 90,
bin2: 10
}, {
x: 2,
bin1: 20,
bin2: 20
}, {
x: 3,
bin1: 50,
bin2: 30
}, {
x: 4,
bin1: 100,
bin2: 40
}];
var cf = crossfilter(data);
var dim = cf.dimension(function(d) {
return d.x;
});
var groups = {
bin1: dim.group().reduceSum(function(d) {
return d.bin1;
}),
bin2: dim.group().reduceSum(function(d) {
return d.bin2;
})
};
var chart = dc.barChart("#chart")
.width(400)
.height(200)
.x(d3.scale.linear().domain([1, 4]))
.dimension(dim)
.group(groups.bin1);
chart.render();
function changeBin (binNum) {
chart.group(groups[binNum]);
chart.render();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>
<div id="chart"></div>
<button onclick="changeBin('bin1');">Bin 1</button>
<button onclick="changeBin('bin2');">Bin 2</button>