DC js饼图

时间:2017-04-12 12:43:20

标签: d3.js dc.js crossfilter

我有一个返回2个类别的维度,这两个值也可以分为3个。我想显示一个饼图,其中只有3个切片来自其中一个类别。每次我尝试它给我一个维度,但该组的总数大于任何一个类别,实际上是整个维度的总和。任何想法??

以下是我的代码维度:

eidDimension = ndx.dimension(function(d){
                  y = d.message;


                    if((y.indexOf("FFEID") > -1) && (y.indexOf("Positive") > -1)){

                        return "Positive";
                    }
                    if((y.indexOf("FFEID") > -1) && (y.indexOf("Negative") > -1)){

                        return "Negative";
                    }
                    if((y.indexOf("FFEID") > -1) && (y.indexOf("Invalid") > -1)){

                        return "Invalid";
                    }

                })

小组:

eidCountGroup = eidDimension.group().reduceCount(function(d){

                  y = d.message;


                    if((y.indexOf("FFEID") > -1) && (y.indexOf("Positive") > -1)){

                        return +y;
                    }
                    if((y.indexOf("FFEID") > -1) && (y.indexOf("Negative") > -1)){

                        return +y;
                    }
                    if((y.indexOf("FFEID") > -1) && (y.indexOf("Invalid") > -1)){

                        return +y;
                    }

                })
饼图:

  eidchart
                     .width(width)
                     .height(300)
                     .slicesCap(5)
                     .innerRadius(20).colors(d3.scale.category10())
                     .dimension(eidDimension)
                     .group(eidCountGroup)
                     .legend(dc.legend())
                     .on('pretransition', function(chart) {
                     chart.selectAll('text.pie-slice').text(function(d) {
                             return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
                     })
                     });

                 eidchart.render();

现在d.message有一些字符串,包括“FFViral”,我不想包含在饼图中。然而,从饼图中得到的总数意味着它们被包括在内。

以下是数据样本。

[
  {
    "id": 3071,
    "result_id": "361a3a26-feb7-4aa7-bd12-195fa35b45b0",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:11637-00048 Result: :10565 cp/mL Approved by : Supervisor",
    "date": "2017-04-12T08:37:04.060+0000",
    "time_stamp": "2017-04-12 12:06:48",
    "notified": 0
  },
  {
    "id": 3072,
    "result_id": "8354210c-9ab4-41a3-8104-77a15d9dd338",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFEID Results   Patient ID:11637-00048 Result: :Negative Approved by : Supervisor",
    "date": "2017-04-12T08:36:53.250+0000",
    "time_stamp": "2017-04-12 12:06:48",
    "notified": 0
  },
  {
    "id": 3073,
    "result_id": "3d992dc1-a298-4ce4-a1bf-008b0d179a6e",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFEID Results   Patient ID:51334602107 Result: :Negative Approved by : Supervisor",
    "date": "2017-04-12T08:36:52.417+0000",
    "time_stamp": "2017-04-12 12:06:48",
    "notified": 0
  },
  {
    "id": 3074,
    "result_id": "fde8313c-da15-467a-9cb9-c366426214f2",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFEID Results   Patient ID:11637-00048 Result: :Positive Approved by : Supervisor",
    "date": "2017-04-12T09:20:15.740+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3075,
    "result_id": "a492b14d-147b-4387-89d4-b5d5acb44c5f",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:11637-00002 Result: :292742 cp/mL Approved by : Supervisor",
    "date": "2017-04-12T09:19:26.703+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3076,
    "result_id": "2455a23c-3691-41f8-91e0-d8c7f811b695",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:11637-00024 Result: :33597 cp/mL Approved by : Supervisor",
    "date": "2017-04-12T09:19:25.860+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3077,
    "result_id": "448c797b-996f-4e0f-9b19-003566c0b671",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFEID Results   Patient ID:11637-00048 Result: :Invalid Approved by : Supervisor",
    "date": "2017-04-12T09:19:24.960+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3078,
    "result_id": "f142944b-aa48-43bd-80e7-7a6483ea6282",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:1163700018 Result: :246796 cp/mL Approved by : Supervisor",
    "date": "2017-04-12T09:19:22.033+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3079,
    "result_id": "d9889930-93a3-48ab-97cd-1fa1063b52d6",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:1163700032 Result: :3726 cp/mL Approved by : Supervisor",
    "date": "2017-04-12T09:19:21.207+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3080,
    "result_id": "1fcdb8ea-63d7-4e9f-99ee-02912e2c501f",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:11637-00039 Result: :5691 cp/mL Approved by : Supervisor",
    "date": "2017-04-12T09:19:20.353+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3081,
    "result_id": "b580b875-6d2a-4995-ba6f-021ce319cb6e",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:50100100125 Result: :< LDL copies/ml  Approved by : Supervisor",
    "date": "2017-04-12T09:19:16.580+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3082,
    "result_id": "5e6eb9d2-6b2e-49d6-883b-86152fce5a44",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:11637-30600100379 Result: :< LDL copies/ml  Approved by : Supervisor",
    "date": "2017-04-12T09:19:15.643+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3083,
    "result_id": "6793be3c-25b1-431d-a164-faeb405d6fe6",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:1163700040 Result: :< LDL copies/ml  Approved by : Supervisor",
    "date": "2017-04-12T09:19:11.820+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  },
  {
    "id": 3084,
    "result_id": "2c10407f-3c8b-40de-af28-5cc295fbba0e",
    "phone_no": 726974003,
    "status": 0,
    "message": "FFViral Load Results   Patient CCC #:1163-00044 Result: :< LDL copies/ml  Approved by : Supervisor",
    "date": "2017-04-12T09:19:07.010+0000",
    "time_stamp": "2017-04-12 12:26:40",
    "notified": 0
  }
]

我想显示数据的饼图,其中消息仅包含“FFEID”为正,负或无效,并从饼图中省略“FFViral”消息。

1 个答案:

答案 0 :(得分:1)

我认为您需要使用fake group

通常,dc.js / crossfilter中的所有图表都包含除过滤后的所有数据。如果要排除某些数据而不在其他图表中对其进行过滤,则需要对数据进行后处理。

发生了什么

首先让我解释一下我认为目前正在发生的事情。如果邮件包含eidDimension,您的FFEID函数会返回正,负或无效,但如果邮件不包含字符串,它会返回什么?

在JavaScript中,函数总是必须返回一些东西,所以如果一个函数到达终点并且没有显式返回,它将返回undefined

所以你可能最终得到4个类别,其中一个类别为undefined

如何排除值

首先让我们纠正。我们将第四类明确:

eidDimension = ndx.dimension(function(d){
              y = d.message;


                if((y.indexOf("FFEID") > -1) && (y.indexOf("Positive") > -1)){

                    return "Positive";
                }
                if((y.indexOf("FFEID") > -1) && (y.indexOf("Negative") > -1)){

                    return "Negative";
                }
                if((y.indexOf("FFEID") > -1) && (y.indexOf("Invalid") > -1)){

                    return "Invalid";
                }

             return 'non-FFEID'; // make 4th category explicit
            })

现在我们可以使用fake group from the FAQ排除第四个类别:

function remove_bins(source_group) { // (source_group, bins...}
    var bins = Array.prototype.slice.call(arguments, 1);
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return bins.indexOf(d.key) === -1;
            });
        }
    };
}

eidCountGroup = remove_bins(eidDimension.group(), 'non-FFEID');

这需要一个crossfilter组并通过调用crossfilter组.all()将其包装在一个实现.all()的对象中,然后删除作为参数给出的任何bin。

请注意,我们不需要为其指定reduceCount或函数。正如@Ethan指出的那样,reduceCount没有采用任何参数,因此该功能被忽略了。 reduceCount也是默认缩减,因此根本不需要调用它。

注意事项

尽管看起来有点hacky,假团队工作得很好。这是因为dc.js只使用了交叉滤波器API的一小部分。

但是,以这种方式使用crossfilter可能会产生一些意想不到的结果。

  1. 如果有人点击某个切片,请在FFEID饼图中说出“否定”,他们将过滤FFEID Negative上的所有图表。除非图表清楚标记,否则可能会引起混淆。
  2. 如果有人点击其他图表导致FFEID被过滤掉(比如FFViral),那么此图表将变为完全为空,因为所有匹配的行现在都在non-FFEID类别中。如果您考虑它,这是有道理的,但它与其他dc.js图表​​不同,其中每个图表以某种方式表示所有数据。