DC js饼图答案 - 爱码网

【问题标题】：DC js pie chartDC js饼图
【发布时间】：2017-04-12 12:43:20
【问题描述】：

我有一个返回 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”消息。

【问题讨论】：

请分享一些代码！
@Mazz 谢谢。我确实原谅了我的经验不足。
reduceCount 函数看起来很奇怪 - 它在 y 上进行字符串匹配，然后将其转换为数字。你确定那是你想要的吗？好像你每次都会得到NaN。
group.reduceCount 甚至会争论吗？但我担心维度访问器。有很多潜在的情况会返回 null 并破坏一切。与样本数据共享数据或工作示例将有助于获得答案。
@Gordon 我没有得到 NaN 但我不确定。

标签： d3.js dc.js crossfilter

【解决方案1】：

我认为您需要为此使用fake group。

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

发生了什么

首先让我解释一下我认为目前正在发生的事情。如果消息包含FFEID，您的eidDimension 函数会返回Positive、Negative 或Invalid，但如果消息不包含字符串，它会返回什么？

在 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');

这需要一个交叉过滤器组并将其包装在一个对象中，该对象通过调用交叉过滤器组的.all() 来实现.all()，然后删除作为参数给出的所有箱。

请注意，我们不需要指定reduceCount 或它的函数。正如@Ethan 指出的那样，reduceCount 不接受任何参数，因此该函数被忽略了。 reduceCount 也是默认的缩减，所以根本不需要调用它。

注意事项

尽管看起来有点老套，但虚假的群组运作良好。这是因为 dc.js 只使用了 crossfilter API 的一小部分。

但是，以这种方式使用交叉过滤器可能会产生一些意想不到的结果。

如果有人点击一个切片，例如 FFEID 饼图中的 Negative，他们将过滤 FFEID 和 Negative 上的所有图表。除非清楚地标记图表，否则这可能会造成混淆。
如果有人点击另一个图表导致 FFEID 被过滤掉（比如 FFViral），那么这个图表将完全为空，因为所有匹配的行现在都在 non-FFEID 类别中。如果您考虑一下，这是有道理的，但它与其他 dc.js 图表不同，其中每个图表以某种方式代表所有数据。

【讨论】：

值得强调的是，让您的维度访问器返回不可比较的值（undefined 和字符串）在 Crossfilter 中真的不好。它会破坏一切，所以你必须确保不会发生这种情况，就像 Gordon 上面所做的那样。
这是一个非常好的观点，@EthanJewett。我已将此添加到文档和问题中。（如有不清楚请修改。）
太棒了！当您收到有关 Stack Overflow 的有效答案时，请点击绿色复选标记accept the answer。这是一种很好的因果报应，它可以帮助我们这些跟踪特定标签的人。
完成了。谢谢@Gordon