如何按值过滤行，然后计算并绘制饼图和直方图？

Question

我的数据如下：

{
    "raw_data": [
        {
            "agebracket": "",
            "currentstatus": "Hospitalized",
            "dateannounced": "05/06/2020",
            "gender": "",
            ....
        },
        {
            "agebracket": "",
            "currentstatus": "Recovered",
            "dateannounced": "05/06/2020",
            "gender": "",
            .........
        },
        {
            "agebracket": "",
            "currentstatus": "Hospitalized",
            "dateannounced": "05/06/2020",
            "gender": "",
            .......
        },

我能够为整个数据集绘制DC图。但是现在我想通过"currentstatus"-> "Recovered", "Hospitalized", "Deceased".

对其进行过滤

现在看起来像这样：https://blockbuilder.org/ninjakx/3699d4c0efb0ac1d81636cf0e05eda2d

我正在尝试将其与https://blockbuilder.org/ninjakx/fbbae54c3f4d8b2df8f9b981d46857b4集成。

[当我单击确认框时，饼图和直方图将显示与住院相关的结果。在上面的（仪表板）中，这三个图形不需要交叉过滤，因此我能够编写逻辑。但是我对此感到困惑。我应该如何通过"currentstatus" ("Hospitalized, "Recovered" etc)

对其进行过滤

我希望它采用“ currentstatus”变量并返回与其相关的结果。

var group = dim.group(function(d) { 
    return binwidth * Math.floor(d/binwidth); });

以便我可以做：

    barChart
        .height(300)
        .width(500) //give it a width
        .dimension(dim)
        .group(group, currentstatus) //<------------------ Here
           .......

我正在考虑为住院，康复和死者缓解创建三个阵列。但我认为可能比采用这种冗长的方法更短的解决方案。

Answer 1

我将以与过滤兼容的方式进行回答，因为这是dc.js的主要用例。

我建议对堆积的图表进行惯用的交叉过滤器缩减，而不必实际堆积任何东西。

From the FAQ：

var group = dimension.group().reduce(
    function(p, v) { // add
        p[v.type] = (p[v.type] || 0) + v.value;
        return p;
    },
    function(p, v) { // remove
        p[v.type] -= v.value;
        return p;
    },
    function() { // initial
        return {};
    });

您的情况下type为currentstatus。

这将为您提供一个组，其中值是根据状态键入的对象。

如果每个X值都具有所有状态，则每个值对象都将所有状态作为键；如果没有，一些将是不确定的。

使用valueAccessor提取图表所需的字段，如果未定义，则默认为0：

chart.valueAccessor(kv => kv.value[currentstatus] || 0)