DC js饼图
DC js pie chart
我有一个维度其中returns 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" 消息。
我想你需要为此使用 fake group。
通常 dc.js/crossfilter 中的所有图表都包含所有数据，除了被过滤的数据。如果你想排除一些数据而不在其他图表中过滤它，你需要post-处理数据。
发生了什么
首先让我解释一下我认为目前正在发生的事情。如果消息包含 FFEID，您的 eidDimension 函数 return 为 Positive、Negative 或 Invalid，但如果消息不包含字符串，它 return 是什么意思？
在 JavaScript 中，函数总是必须 return 一些东西，所以如果一个函数到达终点并且没有明确的 return，它 returns 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()，然后删除作为参数给出的任何 bin。
请注意，我们不需要为它指定 reduceCount 或函数。正如@Ethan 指出的那样， reduceCount 不接受任何参数，因此该函数被忽略了。 reduceCount 也是默认缩减，因此根本不需要调用它。
注意事项
尽管看起来有点老套，但虚假群组的效果非常好。这是因为 dc.js 只使用交叉过滤器的一小部分 API.
但是，以这种方式使用交叉过滤器可能会产生一些意想不到的结果。
- 如果有人点击 FFEID 饼图中的一个切片，说 Negative，他们将过滤 FFEID 和 Negative 上的所有图表。除非图表清楚标记，否则这可能会造成混淆。
- 如果有人点击另一个图表导致 FFEID 被过滤掉（比如 FFViral），那么这个图表将完全变空，因为所有匹配的行现在都在
non-FFEID 类别中。如果您仔细想想，这是有道理的，但它不同于其他 dc.js 图表，在其他图表中，每个图表都以某种方式代表所有数据。
我有一个维度其中returns 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" 消息。
我想你需要为此使用 fake group。
通常 dc.js/crossfilter 中的所有图表都包含所有数据，除了被过滤的数据。如果你想排除一些数据而不在其他图表中过滤它，你需要post-处理数据。
发生了什么
首先让我解释一下我认为目前正在发生的事情。如果消息包含 FFEID，您的 eidDimension 函数 return 为 Positive、Negative 或 Invalid，但如果消息不包含字符串，它 return 是什么意思？
在 JavaScript 中，函数总是必须 return 一些东西，所以如果一个函数到达终点并且没有明确的 return，它 returns 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()，然后删除作为参数给出的任何 bin。
请注意，我们不需要为它指定 reduceCount 或函数。正如@Ethan 指出的那样， reduceCount 不接受任何参数，因此该函数被忽略了。 reduceCount 也是默认缩减，因此根本不需要调用它。
注意事项
尽管看起来有点老套，但虚假群组的效果非常好。这是因为 dc.js 只使用交叉过滤器的一小部分 API.
但是，以这种方式使用交叉过滤器可能会产生一些意想不到的结果。
- 如果有人点击 FFEID 饼图中的一个切片，说 Negative，他们将过滤 FFEID 和 Negative 上的所有图表。除非图表清楚标记，否则这可能会造成混淆。
- 如果有人点击另一个图表导致 FFEID 被过滤掉（比如 FFViral），那么这个图表将完全变空，因为所有匹配的行现在都在
non-FFEID类别中。如果您仔细想想，这是有道理的，但它不同于其他 dc.js 图表，在其他图表中，每个图表都以某种方式代表所有数据。