Перекрестная фильтрация
Я только начал разбираться с Crossfilter (используется с D3 и DC) и столкнулся с проблемой, пытаясь сгруппировать данные и вывести диаграмму на основе этой группировки. У меня есть некоторые данные, которые записывают дату, время начала и окончания, а также активность. Я пытаюсь получить круговую диаграмму, которая покажет долю времени, потраченного на каждое действие, и гистограмму с накоплением, которая должна разбивать действия по дням, а стек состоит из времени, потраченного на каждое действие в данный день. Вот код, который у меня есть (с небольшим набором данных):
var data = [
{
"starttime": 1470322800,
"endtime": 1470330000,
"activity": "Other",
"capturedate": 1470268800
},
{
"starttime": 1470391200,
"endtime": 1470410400,
"activity": "Photography",
"capturedate": 1470355200
},
{
"starttime": 1470411000,
"endtime": 1470414600,
"activity": "Admin",
"capturedate": 1470355200
},
];
function doTime(t){
var d = moment.duration(t, 'seconds');
var hours = Math.floor(d.asHours());
var mins = Math.floor(d.asMinutes()) - hours * 60;
goTime = hours + " Hours " + mins + " Mins";
return goTime;
}
data.forEach(function(d) {
d.capturedate = new Date(d.capturedate * 1000);
d.Day=d.metacapturedate.getDate();
d.Month=d.metacapturedate.getMonth();
d.Year=d.metacapturedate.getFullYear();
var dur = d.endtime - d.starttime;
d.duration = doTime(dur);
});
var activityLog = crossfilter(data);
var actDim = activityLog.dimension(function(d){return d.activity;});
var dayDim = activityLog.dimension(function(d){return +d.Day;});
var myPho = dayDim.group().reduceCount(function(d){if(d.activity == "School Photography"){return d.duration}else{return 0;}});
var myAdm = dayDim.group().reduceCount(function(d){if(d.activity == "Activity"){return d.duration}else{return 0;}});
var myOth = dayDim.group().reduceCount(function(d){if(d.activity == "Other"){return d.duration}else{return 0;}});
var countMeasure = actDim.group().reduceCount();
var actRingChart = dc.pieChart("#chart-ring-act");
var actBarChart = dc.barChart("#chart-bar-act");
actRingChart
.width(320).height(320)
.dimension(actDim)
.group(countMeasure)
.legend(dc.legend().x(110).y(120).itemHeight(13).gap(5))
.renderLabel(false)
.innerRadius(80);
// set up the bar chart
actBarChart
.width(800).height(400)
.dimension(dayDim)
.group(myPho,"Photography")
.stack(myAdm,"Admin")
.stack(myOth,"Other")
.x(d3.scale.linear().domain([1,8]))
.yAxisLabel("Time Spent Per Day");
// render all charts
dc.renderAll();
Это дает мне круговую диаграмму, показывающую пропорцию количества выполненных действий (а не долю затраченного времени) и гистограмму, которая аналогично показывает количество действий, а не продолжительность. Я все еще немного смутно отношусь к тому, как работает группировка и сокращение карт в Crossfilter, поэтому мне неясно, как правильно объединить данные. Любая помощь или толчок в правильном направлении будет принята с благодарностью.
(Я также использую Moment.js для обработки формата даты / времени, но у меня нет проблем с этим).
Спасибо