Crossfilter分组

我刚刚开始熟悉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来处理日期/时间格式的东西，但没有任何问题）。

谢谢

链接地址: http://www.djcxy.com/p/32705.html

上一篇: Crossfilter Grouping

下一篇: Crossfilter with DC.js Choropleth map