为 dc.js 仪表板使用一个交叉过滤器维度中的多个字段答案

【问题标题】：Using multiple fields in one crossfilter dimension for a dc.js dashboard为 dc.js 仪表板使用一个交叉过滤器维度中的多个字段
【发布时间】：2016-02-29 12:01:23
【问题描述】：

在我的数据集中，我有 4 列格式如下：

data-example

基本上，我们一直在跟踪患者，一旦事件发生，从那个时间段到最后的所有值都是真实的。因此，要查看特定时间的生存百分比，我需要查看当时具有“假”价值的人数我试图把它变成一个折线图（dc.js），其中 x-as 代表时间，y 轴代表包含“假”的数据集的百分比（当时）

我首先尝试使用 4 个不同的维度进行此操作，每个字段 1 个。这不能正常工作。

我假设我需要将这 4 个字段整合到一个维度中。

我有一个 printfilter 功能来检查我的维度和组是否正常工作：

function print_filter(filter){
        var f=eval(filter);
        if (typeof(f.length) != "undefined") {}else{}
        if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
        if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
        console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
    };

当我在 myDimension.group.reduceCount() 上调用此过滤器时，我希望输出如下：

[{0 : 100}, {13: 48}, {26 : 60}, {52: 72}]

对象中的第一项是以周为单位的时间，第二项是当时有错误的人的百分比

我应该如何设置维度和组来实现这个输出？

更新：尝试使用以下代码也不起作用：

var recDim = {
                            x0: cf1.dimension(function(d){return d.recidiefNa0;}),
                            x13: cf1.dimension(function(d){return d.recidiefNa13;}),
                            x26: cf1.dimension(function(d){return d.recidiefNa26;}),
                            x52: cf1.dimension(function(d){return d.recidiefNa52;})
                         };
            var recGroup =  {
                                0: recDim.x0.group(),
                                13: recDim.x13.group(),
                                26: recDim.x26.group(),
                                52: recDim.x52.group()
                            } ;

          print_filter(recGroup);

更新 2：我尝试改用 4 维并制作复合折线图。这是当前的代码。它计算并在正确的位置呈现数据点，因为它的 4 个不同的图表没有显示正确的线

var recDim0 = cf1.dimension(function(d){ return [d.recidiefNa0]});
            var recDim13 = cf1.dimension(function(d){return [d.recidiefNa13]});
            var recDim26 = cf1.dimension(function(d){return [d.recidiefNa26]});
            var recDim52 = cf1.dimension(function(d){return [d.recidiefNa52]});

            var recGroup0 = recDim0.group();
            var recGroup13 = recDim13.group();
            var recGroup26 = recDim26.group();
            var recGroup52 = recDim52.group();

            var scChart = dc.compositeChart("#scStepChart");
            scChart
            .width(600)
            .height(400)
            .x(d3.scale.linear().domain([0,52]))
            .y(d3.scale.linear().domain([0,100]))
            .clipPadding(10)
            .brushOn(false)
            .xAxisLabel("tijd in weken")
            .yAxisLabel("percentage vrij van residu/recidief")
            .compose([
                dc.lineChart(scChart)
                    .dimension(recDim0)
                    .group(recGroup0)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .keyAccessor(function(d) {return 0;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100;}),
                dc.lineChart(scChart)
                    .dimension(recDim13)
                    .group(recGroup13)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .colors(['blue'])
                    .keyAccessor(function(d){return 13;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100;}),
                dc.lineChart(scChart)
                    .dimension(recDim26)
                    .group(recGroup26)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .colors(['blue'])
                    .keyAccessor(function(d){return 26;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100;}),
                dc.lineChart(scChart)
                    .dimension(recDim52)
                    .group(recGroup52)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .colors(['blue'])
                    .keyAccessor(function(d){return 52;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100})


            ])                    
            .xAxis().ticks(4);
            scChart.render();

这是结果，你可以看到这条线没有正确显示。

http://postimg.org/image/gitdw1yj9/

cmets 中有 JSFiddle 和 CodePen 的链接

【问题讨论】：

请分享您的尝试或（更好地）使用 Codepen、JSFiddle 或类似服务创建一个工作示例。一般来说，我会首先重组您的数据，以便您将所有观察结果排列成行。在这个数据集的情况下，只有一个实变量，所以它应该只有一列。当前数据集中的每一行在新数据集中应该变成 4 行。通过一个工作示例，我们可以从那里开始工作。
您好@EthanJewett，起初我在 xAfter 列中有数据，该值将是它发生后的周数。然而，这导致了我没有图表所需的 0 值的问题（希望这是有道理的）。另一个问题是它会显示我需要的相反百分比，即 48 而不是 52。这无法通过从 100 中减去来解决。
这里是 JSFiddle：jsfiddle.net/3rxxo0am 代码包含整个仪表板，但有问题的部分标记在包含“问题开始”和“问题结束”的 cmets 之间
您需要为要显示的每周和每位患者设置一行。 N 个患者和 5 个观察周（0、13、26、39、52）意味着您应该有 N*5 行。
数据集是一个 csv 文件，所以它不能在 JSfiddle 上运行

标签： javascript d3.js data-visualization dc.js crossfilter

【解决方案1】：

在@Gordon 的帮助下解决了这个问题。将我的数据格式改回一个字段：以周数为值。

使用这个 fakegroup 我能够得到正确的图表：

function accumulate_subtract_from_100_and_prepend_start_point_group(source_group) {
return {
    all:function () {
        var cumulate = 100;
        var result = [];
        return [{key: 0, value: cumulate}]
           .concat(source_group.all().map(function(d) {
              cumulate -= d.value;
              return {key:d.key, value:cumulate};
           }));
    }
};

}

【讨论】：