Javascript 交叉滤波器分组

我刚刚开始学习交叉过滤器（与D3和DC一起使用），在尝试对数据进行分组并根据分组输出图表时遇到了一个问题。我有一些记录日期、开始和结束时间以及活动的数据。我想做的是一个饼图，它显示了在每项活动上花费的时间的比例，还有一个堆叠的条形图，它应该按天对活动进行分解，堆栈由给定一天在每项活动上花费的时间组成。以下是我迄今为止的代码（带有一个小样本数据集）：

这给了我一个饼图，显示了一项活动的执行次数比例（而不是花费的时间比例），以及一个条形图，类似地显示了一项活动的计数而不是持续时间。我仍然不清楚分组和map reduce在Crossfilter中是如何工作的，所以我不清楚如何正确地互操作数据。任何朝着正确方向的帮助或推动都将受到非常感激的接待

（我还使用Moment.js来处理日期/时间格式的东西，但这样做没有任何问题）

---

谢谢

使用reduceSum而不是reduceCount。reduceCount只计算记录数，根本不接受参数。reduceSum将作为参数传递的函数返回的值相加。在我看来，如果你切换到reduceSum，这应该行得通。在你的建议下，我尝试用reduceSum代替reduceCount，但是，尽管饼图不受影响，条形图现在根本没有显示任何内容。救命啊！请用您当前使用的确切代码更新您的问题。如果你能在JSFIDLE或类似的东西上组合一个工作示例，那将是理想的，但至少我们需要能够看到正在崩溃的代码。在这期间，我发现我不得不删除moment.js的内容，因为我找不到一个源代码将其用作小提琴中的外部资源。通过这样做，我意识到返回的d.duration不是一个数字，而是一个字符串（例如2小时34分钟）。当d.duration刚开始返回一个数字时，它就完全就位了！你最初的指导使我走上了正确的道路，但我自己的疏忽妨碍了你的回答。干杯使用reduceSum而不是reduceCount。reduceCount只计算记录数，根本不接受参数。reduceSum将作为参数传递的函数返回的值相加。在我看来，如果你切换到reduceSum，这应该行得通。在你的建议下，我尝试用reduceSum代替reduceCount，但是，尽管饼图不受影响，条形图现在根本没有显示任何内容。救命啊！请用您当前使用的确切代码更新您的问题。如果你能在JSFIDLE或类似的东西上组合一个工作示例，那将是理想的，但至少我们需要能够看到正在崩溃的代码。在这期间，我发现我不得不删除moment.js的内容，因为我找不到一个源代码将其用作小提琴中的外部资源。通过这样做，我意识到返回的d.duration不是一个数字，而是一个字符串（例如2小时34分钟）。当d.duration刚开始返回一个数字时，它就完全就位了！你最初的指导使我走上了正确的道路，但我自己的疏忽妨碍了你的回答。干杯

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