Перекрестная фильтрация

Я только начал разбираться с 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 для обработки формата даты / времени, но у меня нет проблем с этим).

Спасибо

0 ответов

Другие вопросы по тегам