时间戳

首页 > 解决方案 > 为每个类别创建直方图

dc.js - 为每个类别创建直方图

问题描述

我正在尝试创建具有ages这样的组的直方图(0-10), (10-20), ...(90,100)

数据集如下所示：

0: {agebracket: "20", currentstatus: "Recovered", dateannounced: "30/01/2020"}
1: {agebracket: "45", currentstatus: "Confirmed", dateannounced: "02/03/2020"}
2: {agebracket: "24", currentstatus: "Recovered", dateannounced: "02/03/2020"}
.
.
.
99: {agebracket: "58", currentstatus: "Hospitalized", dateannounced: "20/03/2020"}

我能够创建直方图，但这是在整个数据集上。我没有考虑

"currentstatus" --> "Recovered", "Hospitalized", "Deceased"

在整个数据集上：

在此处输入图像描述

我试图通过 currentstatus 创建直方图，但它看起来像这样： 在此处输入图像描述

这是我尝试过的：

var binwidth = 10;
var dim = cf.dimension(function(d) { 
    return parseInt(d.agebracket); });

var age_by_cases= dim.group().reduce(
// add
    (p, v) => {

      p[v.currentstatus] = (p[v.currentstatus] || 0) + 1;
      return p;
    },
// remove
    (p, v) => {
      p[v.currentstatus] -= 1;
      return p;
},
// init
    () => ({})
);

barChart
    .height(300)
    .width(500) //give it a width
    .dimension(dim)
    .group(age_by_cases, type)
    .elasticY(true)
    .valueAccessor(function(p) { 
        return p.value[type_c];
        // return (binwidth * Math.floor(parseInt(p.value[type_c])/binwidth)) ; 
        })  
    .x(d3.scaleLinear().domain([1,101]))
    .xUnits(dc.units.fp.precision(binwidth))

    .elasticX(true);

行号 170-184和线号。227-243 https://blockbuilder.org/ninjakx/8e2c0b407fdb1991c9cc5e81e447ebe2

我只是被这件事吓坏了。我不知道如何解决它。

标签： dc.js

解决方案

通常你会在维度键函数中定义分箱：

var dim = cf.dimension(function(d) { 
    return binwidth * Math.floor(parseInt(p.agebracket)/binwidth);
};

然后，使用中的 bin 宽度（或其他 binning 规范）xUnits，就像你拥有的那样：

.xUnits(dc.units.fp.precision(binwidth))

这会导致 crossfilter 将每一行排序到 bin 中，并将值向下舍入binwidth，并告诉 dc.js 也使用 binwidth 来计算条形宽度。

推荐阅读