d3/dc.js - How to create a stacked bar chart while telling crossfilter to treat elements in an array as separate records?
新功能：我在解决方案中发布的小提琴有效(https://jsfiddle.net/jnf84n7c/)。但是，当我尝试在项目中实施策略时，遇到了问题。当我单击不是第一个图形的图形时，我收到一条错误消息。
Uncaught TypeError: a.group.all is not a function (error located in dc.min.js)
有人知道为什么它在小提琴中起作用，但在我的ruby-on-rails应用程序中不起作用时为何起作用？
新代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 | var data = [ {"key":"KEY-1","state":"MA","status":["A","R","C"],"items":["orange","meat","bread"],"date":"Y16"}, {"key":"KEY-2","state":"MA","status":["A","O"],"items":["apple","bread"],"date":"Y15"}, {"key":"KEY-3","state":"TX","status":["O"],"items":["bread"],"date":"Y16"}, {"key":"KEY-4","state":"TN","status":["A","R"],"items":["apple","bread"],"date":"Y16"}, {"key":"KEY-5","state":"TN","status":["A","O"],"items":["apple","orange"],"date":"Y15"}, {"key":"KEY-6","state":"TN","status":[],"items":[],"date":"Y14"} ]; var cf = crossfilter(data); var dates = cf.dimension(function(d){ return d.date; }); var datesGroup = dates.group(); var states = cf.dimension(function(d){ return d.state; }); var statesGroup = states.group(); var itemsDim = cf.dimension(function(d){ return d.items; }); var itemsGroup = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value(); itemsGroup.all = myAllFunction; var states_items_group_apple = states.group().reduce(reduceAdd_apple, reduceRemove_apple, reduceInitial_items); var states_items_group_bread = states.group().reduce(reduceAdd_bread, reduceRemove_bread, reduceInitial_items); var states_items_group_orange = states.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items); var states_items_group_meat = states.group().reduce(reduceAdd_meat, reduceRemove_meat, reduceInitial_items); var itemsGroup1 = itemsDim.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value(); var itemsGroup2 = itemsDim.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value(); var itemsGroup3 = itemsDim.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value(); itemsGroup1.all = myAllFunction; itemsGroup2.all = myAllFunction; itemsGroup3.all = myAllFunction; var status = cf.dimension(function(d){ return d.status; }); var statusGroup1 = status.groupAll().reduce(reduceAdd_group1, reduceRemove_group1, reduceInitial_group).value(); var statusGroup2 = status.groupAll().reduce(reduceAdd_group2, reduceRemove_group2, reduceInitial_group).value(); var statusGroup3 = status.groupAll().reduce(reduceAdd_group3, reduceRemove_group3, reduceInitial_group).value(); var statusGroup4 = status.groupAll().reduce(reduceAdd_group4, reduceRemove_group4, reduceInitial_group).value(); statusGroup1.all = myAllFunction; statusGroup2.all = myAllFunction; statusGroup3.all = myAllFunction; statusGroup4.all = myAllFunction; var statusGroup = status.groupAll().reduce(reduceAdd_group, reduceRemove_group, reduceInitial_group).value(); statusGroup.all = myAllFunction; var row = dc.rowChart("#rowchart"); row.height(170) .dimension(itemsDim) .group(itemsGroup) .ordering(function(d){return -d.value;}) .renderLabel(true) .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"]) .xAxis().ticks(3); row.filterHandler(myFilterFunction); var pie1 = dc.pieChart("#piechart1"); pie1.height(75).width(75) .dimension(dates) .group(datesGroup); var pie2 = dc.pieChart("#piechart2"); pie2.height(75).width(75) .dimension(states) .group(statesGroup); var pie3 = dc.pieChart("#piechart3"); pie3.height(75).width(75) .dimension(status) .group(statusGroup); pie3.filterHandler(myFilterFunction); var bar = dc.barChart("#barchart"); bar.width(500).height(200) .dimension(states) .group(states_items_group_bread, 'bread') .stack(states_items_group_orange, 'orange') .stack(states_items_group_apple, 'apple') .stack(states_items_group_meat, 'meat') .valueAccessor(function(p){ return p.value.count; }) .renderHorizontalGridLines(true) .renderLabel(true) .legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100)) .gap(10) .elasticX(true).elasticY(true) .yAxisLabel("count") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .margins({top:30,left:50,right:10,bottom:50}); var bar2 = dc.barChart("#barchart2"); bar2.width(500).height(200) .dimension(itemsDim) .group(itemsGroup1,'MA') .stack(itemsGroup2,'TN') .stack(itemsGroup3,'TX') .renderHorizontalGridLines(true) .renderLabel(true) .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60)) .gap(10) .yAxisLabel("count") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"]) .margins({top:30,left:50,right:10,bottom:50}); bar2.filterHandler(myFilterFunction); var bar3 = dc.barChart("#barchart3"); bar3.width(500).height(200) .dimension(status) .group(statusGroup1,"bread") .stack(statusGroup2,"apple") .stack(statusGroup3,"orange") .stack(statusGroup4,"meat") .renderHorizontalGridLines(true) .renderLabel(true) .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60)) .gap(10) .yAxisLabel("count") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .margins({top:30,left:50,right:10,bottom:50}); bar3.filterHandler(myFilterFunction); dc.renderAll(); function reduceAdd(p,v){ if (v.items[0] ==="") return p; v.items.forEach(function(val,idx){ p[val] = (p[val] || 0) + 1; }); return p; } function reduceRemove(p,v){ if (v.items[0] ==="") return p; v.items.forEach(function(val,idx){ p[val] = (p[val] || 0) - 1; }); return p; } function reduceInitial(){ return { bread: 0, apple: 0, orange: 0, meat: 0 }; } function reduceAdd1(p,v){ if (v.items[0] ==="") return p; if (v.state ==="MA"){ v.items.forEach(function(val,idx){ p.bread += (val === 'bread' ? 1 : 0); p.apple += (val === 'apple' ? 1 : 0); p.orange += (val === 'orange' ? 1 : 0); p.meat += (val === 'meat' ? 1 : 0); }); } return p; } function reduceRemove1(p,v){ if (v.items[0] ==="") return p; if (v.state ==="MA"){ v.items.forEach(function(val,idx){ p.bread -= (val === 'bread' ? 1 : 0); p.apple -= (val === 'apple' ? 1 : 0); p.orange -= (val === 'orange' ? 1 : 0); p.meat -= (val === 'meat' ? 1 : 0); }); } return p; } function reduceAdd2(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TN"){ v.items.forEach(function(val,idx){ p.bread += (val === 'bread' ? 1 : 0); p.apple += (val === 'apple' ? 1 : 0); p.orange += (val === 'orange' ? 1 : 0); p.meat += (val === 'meat' ? 1 : 0); }); } return p; } function reduceRemove2(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TN"){ v.items.forEach(function(val,idx){ p.bread -= (val === 'bread' ? 1 : 0); p.apple -= (val === 'apple' ? 1 : 0); p.orange -= (val === 'orange' ? 1 : 0); p.meat -= (val === 'meat' ? 1 : 0); }); } return p; } function reduceAdd3(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TX"){ v.items.forEach(function(val,idx){ p.bread += (val === 'bread' ? 1 : 0); p.apple += (val === 'apple' ? 1 : 0); p.orange += (val === 'orange' ? 1 : 0); p.meat += (val === 'meat' ? 1 : 0); }); } return p; } function reduceRemove3(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TX"){ v.items.forEach(function(val,idx){ p.bread -= (val === 'bread' ? 1 : 0); p.apple -= (val === 'apple' ? 1 : 0); p.orange -= (val === 'orange' ? 1 : 0); p.meat -= (val === 'meat' ? 1 : 0); }); } return p; } function reduceAdd_apple(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'apple' ? 1 : 0); }); return p; } function reduceRemove_apple(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'apple' ? 1 : 0); }); return p; } function reduceAdd_bread(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'bread' ? 1 : 0); }); return p; } function reduceRemove_bread(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'bread' ? 1 : 0); }); return p; } function reduceAdd_orange(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'orange' ? 1 : 0); }); return p; } function reduceRemove_orange(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'orange' ? 1 : 0); }); return p; } function reduceAdd_meat(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'meat' ? 1 : 0); }); return p; } function reduceRemove_meat(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'meat' ? 1 : 0); }); return p; } function reduceAdd_group1(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if (val1 ==="bread"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A += (val2 === 'A' ? 1 : 0); p.O += (val2 === 'O' ? 1 : 0); p.C += (val2 === 'C' ? 1 : 0); p.R += (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceRemove_group1(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="bread"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A -= (val2 === 'A' ? 1 : 0); p.O -= (val2 === 'O' ? 1 : 0); p.C -= (val2 === 'C' ? 1 : 0); p.R -= (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceAdd_group2(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="apple"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A += (val2 === 'A' ? 1 : 0); p.O += (val2 === 'O' ? 1 : 0); p.C += (val2 === 'C' ? 1 : 0); p.R += (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceRemove_group2(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="apple"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A -= (val2 === 'A' ? 1 : 0); p.O -= (val2 === 'O' ? 1 : 0); p.C -= (val2 === 'C' ? 1 : 0); p.R -= (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceAdd_group3(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="orange"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A += (val2 === 'A' ? 1 : 0); p.O += (val2 === 'O' ? 1 : 0); p.C += (val2 === 'C' ? 1 : 0); p.R += (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceRemove_group3(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="orange"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A -= (val2 === 'A' ? 1 : 0); p.O -= (val2 === 'O' ? 1 : 0); p.C -= (val2 === 'C' ? 1 : 0); p.R -= (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceAdd_group4(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="meat"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A += (val2 === 'A' ? 1 : 0); p.O += (val2 === 'O' ? 1 : 0); p.C += (val2 === 'C' ? 1 : 0); p.R += (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceRemove_group4(p,v){ if (v.items[0] ==="") return p; if (v.status[0] ==="") return p; v.items.forEach(function(val1,idx1){ if(val1 ==="meat"){ v.status.forEach(function(val2,idx2){ if(idx1 === idx2){ p.A -= (val2 === 'A' ? 1 : 0); p.O -= (val2 === 'O' ? 1 : 0); p.C -= (val2 === 'C' ? 1 : 0); p.R -= (val2 === 'R' ? 1 : 0); } }); } }); return p; } function reduceAdd_group(p,v){ if (v.status[0] ==="") return p; v.status.forEach(function(val,idx){ p[val] = (p[val] || 0) + 1; }); return p; } function reduceRemove_group(p,v){ if (v.status[0] ==="") return p; v.status.forEach(function(val,idx){ p[val] = (p[val] || 0) - 1; }); return p; } function reduceInitial_group(){ return { A: 0, O: 0, C: 0, R: 0 }; } function reduceInitial_items(){ return { count: 0, state: '' }; } //filter function: function myFilterFunction(dimension,filters){ dimension.filter(null); if (filters.length === 0) dimension.filter(null); else dimension.filterFunction(function(d){ for(var i=0; i<d.length; i++){ if (filters.indexOf(d[i]) >= 0) return true; } return false; }); return filters; } function myAllFunction(){ var newObject = []; for(var key in this){ if(this.hasOwnProperty(key) && key !="all"){ newObject.push({ key: key, value: this[key] }); } } return newObject; }; |
旧问题：
很抱歉提出另一个问题。不幸的是，我无法在其他帖子上发表评论以问我的问题。与我的相似的两个问题是：
dc.js-如何按唯一ID分组
和
有没有一种方法可以告诉Crossfilter将数组的元素视为单独的记录，而不是将整个数组视为单个键？
我使用的是后一种代码。但是，我希望能够堆叠。正如您将在jsfiddle中看到的那样，底部的条形图未在x轴上列出项目，而是堆叠了不同的状态计数。任何帮助将不胜感激。谢谢！
这是原始的小提琴：https://jsfiddle.net/7qwqcakr/1/
我几乎用这个小提琴了：https://jsfiddle.net/wq0ed5hr/
但是，即使图例将它们设置为不同的颜色，堆叠的条形图也都是一种颜色。如何解决颜色问题？
修复了颜色问题：https://jsfiddle.net/rmc2zpr4/
现在，唯一的问题涉及"计数问题"，如下面我的解决方案和注释中所述。
这是更新的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 | var data = [ {"key":"KEY-1","state":"MA","items":["orange","meat","bread"],"date":"Y16"}, {"key":"KEY-2","state":"MA","items":["apple","bread"],"date":"Y15"}, {"key":"KEY-3","state":"TX","items":["bread"],"date":"Y16"}, {"key":"KEY-4","state":"TN","items":["apple","bread"],"date":"Y16"}, {"key":"KEY-5","state":"TN","items":["apple","orange"],"date":"Y15"}, {"key":"KEY-6","state":"TN","items":[],"date":"Y14"} ]; var cf = crossfilter(data); var dates = cf.dimension(function(d){ return d.date; }); var datesGroup = dates.group().reduceCount(function(d){ return d.key; }); var states = cf.dimension(function(d){ return d.state; }); var statesGroup = states.group().reduceCount(function(d){ return d.key; }); var itemsDim = cf.dimension(function(d){ return d.items; }); var itemsGroup = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value(); itemsGroup.all = myAllFunction; var statesDim = cf.dimension(function(d){ return d.state; }); var states_items_group_apple = statesDim.group().reduce(reduceAdd_apple, reduceRemove_apple, reduceInitial_items); var states_items_group_bread = statesDim.group().reduce(reduceAdd_bread, reduceRemove_bread, reduceInitial_items); var states_items_group_orange = statesDim.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items); var states_items_group_meat = statesDim.group().reduce(reduceAdd_meat, reduceRemove_meat, reduceInitial_items); var items = cf.dimension(function(d){ return d.items; }) var itemsGroup1 = items.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value(); var itemsGroup2 = items.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value(); var itemsGroup3 = items.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value(); itemsGroup1.all = myAllFunction; itemsGroup2.all = myAllFunction; itemsGroup3.all = myAllFunction; var row = dc.rowChart("#rowchart"); row.height(170) .dimension(itemsDim) .group(itemsGroup) .ordering(function(d){return -d.value;}) .renderLabel(true) .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"]) .xAxis().ticks(3); row.filterHandler(myFilterFunction); var pie1 = dc.pieChart("#piechart1"); pie1.height(75).width(75) .dimension(dates) .group(datesGroup); var pie2 = dc.pieChart("#piechart2"); pie2.height(75).width(75) .dimension(states) .group(statesGroup); var bar = dc.barChart("#barchart"); bar.width(500).height(200) .dimension(statesDim) .group(states_items_group_bread, 'bread') .stack(states_items_group_orange, 'orange') .stack(states_items_group_apple, 'apple') .stack(states_items_group_meat, 'meat') .valueAccessor(function(p){ return p.value.count; }) .renderHorizontalGridLines(true) .renderLabel(true) .legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100)) .gap(10) .elasticX(true).elasticY(true) .yAxisLabel("count") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .margins({top:30,left:50,right:10,bottom:50}); var bar2 = dc.barChart("#barchart2"); bar2.width(500).height(200) .dimension(items) .group(itemsGroup1,'MA') .stack(itemsGroup2,'TN') .stack(itemsGroup3,'TX') .renderHorizontalGridLines(true) .renderLabel(true) .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60)) .gap(10) .yAxisLabel("count") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"]) .margins({top:30,left:50,right:10,bottom:50}); bar2.filterHandler(myFilterFunction); dc.renderAll(); //reduce functions: function reduceAdd(p,v){ if (v.items[0] ==="") return p; v.items.forEach(function(val,idx){ p[val] = (p[val] || 0) + 1; }); return p; } function reduceRemove(p,v){ if (v.items[0] ==="") return p; v.items.forEach(function(val,idx){ p[val] = (p[val] || 0) - 1; }); return p; } function reduceInitial(){ return { bread: 0, apple: 0, orange: 0, meat: 0 }; } function reduceAdd1(p,v){ if (v.items[0] ==="") return p; if (v.state ==="MA"){ v.items.forEach(function(val,idx){ p.bread += (val === 'bread' ? 1 : 0); p.apple += (val === 'apple' ? 1 : 0); p.orange += (val === 'orange' ? 1 : 0); p.meat += (val === 'meat' ? 1 : 0); }); } return p; } function reduceRemove1(p,v){ if (v.items[0] ==="") return p; if (v.state ==="MA"){ v.items.forEach(function(val, idx){ p.bread -= (val === 'bread' ? 1 : 0); p.apple -= (val === 'apple' ? 1 : 0); p.orange -= (val === 'orange' ? 1 : 0); p.meat -= (val === 'meat' ? 1 : 0); }); } return p; } function reduceAdd2(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TN"){ v.items.forEach(function(val,idx){ p.bread += (val === 'bread' ? 1 : 0); p.apple += (val === 'apple' ? 1 : 0); p.orange += (val === 'orange' ? 1 : 0); p.meat += (val === 'meat' ? 1 : 0); }); } return p; } function reduceRemove2(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TN"){ v.items.forEach(function(val,idx){ p.bread -= (val === 'bread' ? 1 : 0); p.apple -= (val === 'apple' ? 1 : 0); p.orange -= (val === 'orange' ? 1 : 0); p.meat -= (val === 'meat' ? 1 : 0); }); } return p; } function reduceAdd3(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TX"){ v.items.forEach(function(val,idx){ p.bread += (val === 'bread' ? 1 : 0); p.apple += (val === 'apple' ? 1 : 0); p.orange += (val === 'orange' ? 1 : 0); p.meat += (val === 'meat' ? 1 : 0); }); } return p; } function reduceRemove3(p,v){ if (v.items[0] ==="") return p; if (v.state ==="TX"){ v.items.forEach(function(val,idx){ p.bread -= (val === 'bread' ? 1 : 0); p.apple -= (val === 'apple' ? 1 : 0); p.orange -= (val === 'orange' ? 1 : 0); p.meat -= (val === 'meat' ? 1 : 0); }); } return p; } function reduceAdd_apple(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'apple' ? 1 : 0); }); return p; } function reduceRemove_apple(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'apple' ? 1 : 0); }); return p; } function reduceAdd_bread(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'bread' ? 1 : 0); }); return p; } function reduceRemove_bread(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'bread' ? 1 : 0); }); return p; } function reduceAdd_orange(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'orange' ? 1 : 0); }); return p; } function reduceRemove_orange(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'orange' ? 1 : 0); }); return p; } function reduceAdd_meat(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count += (val === 'meat' ? 1 : 0); }); return p; } function reduceRemove_meat(p,v){ if (v.items[0] ==="") return p; p.state = v.state; v.items.forEach(function(val,idx){ p.count -= (val === 'meat' ? 1 : 0); }); return p; } function reduceInitial_items(){ return { count: 0, state: '' }; } function myFilterFunction(dimension,filters){ dimension.filter(null); if(filters.length === 0) dimension.filter(null); else dimension.filterFunction(function(d){ for(var i=0; i<d.length; i++){ if(filters.indexOf(d[i]) >= 0) return true; } return false; }); return filters; } function myAllFunction(){ var newObject = []; for(var key in this){ if(this.hasOwnProperty(key) && key !="all"){ newObject.push({ key: key, value: this[key] }); } } return newObject; }; |
您需要做的第一件事就是升级到：
- dc.js 2.0测试版
- Crossfilter 1.4.0-beta.06(Crossfilter现在生活在这里：https://github.com/crossfilter/crossfilter)
- Reductio(推荐)，这样您就不必手动建立自定义分组-这不是严格必要的，但是分组是很多问题的根源，因此，我建议您使用Reductio或Universe来利用前。
接下来，有了这些新的优点，我们就可以简化很多事情。这是使用这些库的新功能的更新的小提琴：https://jsfiddle.net/ff8ox8vq/
我将在下面的完整代码示例中对其进行详细介绍。
1 2 3 4 5 6 7 8 9 10 | var data = [ {"key":"KEY-1","state":"MA","items":["orange","meat","bread"],"date":"Y16"}, {"key":"KEY-2","state":"MA","items":["apple","bread"],"date":"Y15"}, {"key":"KEY-3","state":"TX","items":["bread"],"date":"Y16"}, {"key":"KEY-4","state":"TN","items":["apple","bread"],"date":"Y16"}, {"key":"KEY-5","state":"TN","items":["apple","orange"],"date":"Y15"}, {"key":"KEY-6","state":"TN","items": [],"date":"Y14"} ]; var cf = crossfilter(data); |
上面没有变化。
1 2 3 4 5 | //dimensions and groups: var dates = cf.dimension(function(d){ return d.date; }); var datesGroup = dates.group(); var states = cf.dimension(function(d){ return d.state; }); var statesGroup = states.group() |
1 2 | var itemsDim = cf.dimension(function(d){ return d.items; }, true); var itemsGroup = itemsDim.group(); |
这是开始变得有趣的地方。 Crossfilter 1.4.0在维度调用中支持"数组维度"标志。如果将其设置为
1 2 3 4 5 6 | var addValueGroup = function(reducer, key) { reducer .value(key) .filter(function(d) { return d.items.indexOf(key) !== -1; }) .count(true) } |
用于将特定于项目的计数添加到状态组的实用程序功能。
1 2 3 4 5 6 7 8 | // Reductio nest to break down states by item var reducer = reductio().count(true) addValueGroup(reducer,"orange") addValueGroup(reducer,"meat") addValueGroup(reducer,"bread") addValueGroup(reducer,"apple") reducer(statesGroup); |
配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //graphs: var row = dc.rowChart("#rowchart"); row .renderLabel(true) .height(200) .dimension(itemsDim) .group(itemsGroup) .ordering(function(d){return -d.value;}) .xAxis().ticks(3); var pie1 = dc.pieChart("#piechart1"); pie1 .height(75) .width(75) .dimension(dates) .group(datesGroup); |
没有变化。
1 2 3 4 5 6 7 | var pie2 = dc.pieChart("#piechart2"); pie2 .height(75) .width(75) .dimension(states) .group(statesGroup) .valueAccessor(function(d) { return d.value.count; }); |
我们的Reducio减速器会稍微改变组的结构，因此我们需要
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var bar = dc.barChart("#barchart"); bar.width(500).height(200) .dimension(states) .group(statesGroup, 'orange', sel_stack('orange')) .stack(statesGroup, 'meat', sel_stack('meat')) .stack(statesGroup, 'bread', sel_stack('bread')) .stack(statesGroup, 'apple', sel_stack('apple')) .renderHorizontalGridLines(true) .renderLabel(true) .legend(dc.legend()) .gap(10) .yAxisLabel("count") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal); |
仅适用于没有精美的自定义过滤器功能或其他任何功能。 dc.js和Crossfilter知道该怎么做。不幸的是，在dc.js中，按顺序堆积的条形图似乎存在一个错误，因此，您现在必须在渲染后正确着色条形：-(也许Gordon会在此处提示提示。 由于更新了组结构，因此略有变化，以防万一您输错了其中一个项目键。 我已将有色纸叠问题和计数问题解决为我希望完成计数的方式。我正在使用D3.js版本2.5.5，crossfilter.js版本1.3.11，以及dc.js和dc.css版本2.1.0开发人员。 https://jsfiddle.net/jnf84n7c/
2
3
4
5
6
7
function sel_stack(i) {
return function(d) {
return d.value[i] ? d.value[i].count : 0;
};
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
{"key":"KEY-1","state":"MA","status":["A","R","C"],"items":["orange","meat","bread"],"date":"Y16"},
{"key":"KEY-2","state":"MA","status":["A","O"],"items":["apple","bread"],"date":"Y15"},
{"key":"KEY-3","state":"TX","status":["O"],"items":["bread"],"date":"Y16"},
{"key":"KEY-4","state":"TN","status":["A","R"],"items":["apple","bread"],"date":"Y16"},
{"key":"KEY-5","state":"TN","status":["A","O"],"items":["apple","orange"],"date":"Y15"},
{"key":"KEY-6","state":"TN","status":[],"items": [],"date":"Y14"}
];
var cf = crossfilter(data);
//dimensions and groups:
var dates = cf.dimension(function(d){ return d.date; });
var datesGroup = dates.group();//.reduceCount(function(d){ return d.key; });
var states = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group();//.reduceCount(function(d){ return d.key; });
var itemsDim = cf.dimension(function(d){ return d.items; });
var itemsGroup = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
itemsGroup.all = myAllFunction;
var states_items_group_apple = states.group().reduce(reduceAdd_apple, reduceRemove_apple, reduceInitial_items);
var states_items_group_bread = states.group().reduce(reduceAdd_bread, reduceRemove_bread, reduceInitial_items);
var states_items_group_orange = states.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items);
var states_items_group_meat = states.group().reduce(reduceAdd_meat, reduceRemove_meat, reduceInitial_items);
var itemsGroup1 = itemsDim.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value();
var itemsGroup2 = itemsDim.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value();
var itemsGroup3 = itemsDim.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value();
itemsGroup1.all = myAllFunction;
itemsGroup2.all = myAllFunction;
itemsGroup3.all = myAllFunction;
var status = cf.dimension(function(d){ return d.status; });
var statusGroup1 = status.groupAll().reduce(reduceAdd_group1, reduceRemove_group1, reduceInitial_group).value();
var statusGroup2 = status.groupAll().reduce(reduceAdd_group2, reduceRemove_group2, reduceInitial_group).value();
var statusGroup3 = status.groupAll().reduce(reduceAdd_group3, reduceRemove_group3, reduceInitial_group).value();
var statusGroup4 = status.groupAll().reduce(reduceAdd_group4, reduceRemove_group4, reduceInitial_group).value();
statusGroup1.all = myAllFunction;
statusGroup2.all = myAllFunction;
statusGroup3.all = myAllFunction;
statusGroup4.all = myAllFunction;
var statusGroup = status.groupAll().reduce(reduceAdd_group, reduceRemove_group, reduceInitial_group).value();
statusGroup.all = myAllFunction;
//graphs:
var row = dc.rowChart("#rowchart");
row.height(170)
.dimension(itemsDim)
.group(itemsGroup)
.ordering(function(d){return -d.value;})
.renderLabel(true)
.ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
.xAxis().ticks(3);
row.filterHandler(myFilterFunction);
var pie1 = dc.pieChart("#piechart1");
pie1.height(75).width(75)
.dimension(dates)
.group(datesGroup);
var pie2 = dc.pieChart("#piechart2");
pie2.height(75).width(75)
.dimension(states)
.group(statesGroup);
var pie3 = dc.pieChart("#piechart3");
pie3.height(75).width(75)
.dimension(status)
.group(statusGroup);
pie3.filterHandler(myFilterFunction);
var bar = dc.barChart("#barchart");
bar.width(500).height(200)
.dimension(states)
.group(states_items_group_bread, 'bread')
.stack(states_items_group_orange, 'orange')
.stack(states_items_group_apple, 'apple')
.stack(states_items_group_meat, 'meat')
.valueAccessor(function(p){ return p.value.count; })
.renderHorizontalGridLines(true)
.renderLabel(true)
.legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100))
.gap(10)
.elasticX(true).elasticY(true)
.yAxisLabel("count")
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.margins({top:30, left:50, right:10, bottom:50});
//bar.filterHandler(myFilterFunction);
//bar.on("renderlet", function(_chart){
// _chart.selectAll("rect.bar").on("click", _chart.onClick);
//});
var bar2 = dc.barChart("#barchart2");
bar2.width(500).height(200)
.dimension(itemsDim)
.group(itemsGroup1, 'MA')
.stack(itemsGroup2, 'TN')
.stack(itemsGroup3, 'TX')
.renderHorizontalGridLines(true)
.renderLabel(true)
.legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
.gap(10)
.yAxisLabel("count")
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
.margins({top:30, left:50, right:10, bottom:50});
bar2.filterHandler(myFilterFunction);
var bar3 = dc.barChart("#barchart3");
bar3.width(500).height(200)
.dimension(status)
.group(statusGroup1,"bread")
.stack(statusGroup2,"apple")
.stack(statusGroup3,"orange")
.stack(statusGroup4,"meat")
.renderHorizontalGridLines(true)
.renderLabel(true)
.legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
.gap(10)
.yAxisLabel("count")
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
// .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
.margins({top:30, left:50, right:10, bottom:50});
bar3.filterHandler(myFilterFunction);
dc.renderAll(); // render graphs
//reduce functions:
function reduceAdd(p, v) {
if (v.items[0] ==="") return p; // skip empty values
v.items.forEach (function(val, idx) {
p[val] = (p[val] || 0) + 1; //increment counts
});
return p;
}
function reduceRemove(p, v) {
if (v.items[0] ==="") return p; // skip empty values
v.items.forEach (function(val, idx) {
p[val] = (p[val] || 0) - 1; //decrement counts
});
return p;
}
function reduceInitial() {
return {
bread: 0,
apple: 0,
orange: 0,
meat: 0
};
}
function reduceAdd1(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.state ==="MA"){
v.items.forEach (function(val, idx) {
p.bread += (val === 'bread' ? 1 : 0);
p.apple += (val === 'apple' ? 1 : 0);
p.orange += (val === 'orange' ? 1 : 0);
p.meat += (val === 'meat' ? 1 : 0);
});
}
return p;
}
function reduceRemove1(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.state ==="MA"){
v.items.forEach (function(val, idx) {
p.bread -= (val === 'bread' ? 1 : 0);
p.apple -= (val === 'apple' ? 1 : 0);
p.orange -= (val === 'orange' ? 1 : 0);
p.meat -= (val === 'meat' ? 1 : 0);
});
}
return p;
}
function reduceAdd2(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.state ==="TN"){
v.items.forEach (function(val, idx) {
p.bread += (val === 'bread' ? 1 : 0);
p.apple += (val === 'apple' ? 1 : 0);
p.orange += (val === 'orange' ? 1 : 0);
p.meat += (val === 'meat' ? 1 : 0);
});
}
return p;
}
function reduceRemove2(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.state ==="TN"){
v.items.forEach (function(val, idx) {
p.bread -= (val === 'bread' ? 1 : 0);
p.apple -= (val === 'apple' ? 1 : 0);
p.orange -= (val === 'orange' ? 1 : 0);
p.meat -= (val === 'meat' ? 1 : 0);
});
}
return p;
}
function reduceAdd3(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.state ==="TX"){
v.items.forEach (function(val, idx) {
p.bread += (val === 'bread' ? 1 : 0);
p.apple += (val === 'apple' ? 1 : 0);
p.orange += (val === 'orange' ? 1 : 0);
p.meat += (val === 'meat' ? 1 : 0);
});
}
return p;
}
function reduceRemove3(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.state ==="TX"){
v.items.forEach (function(val, idx) {
p.bread -= (val === 'bread' ? 1 : 0);
p.apple -= (val === 'apple' ? 1 : 0);
p.orange -= (val === 'orange' ? 1 : 0);
p.meat -= (val === 'meat' ? 1 : 0);
});
}
return p;
}
function reduceAdd_apple(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count += (val === 'apple' ? 1 : 0);
});
return p;
}
function reduceRemove_apple(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count -= (val === 'apple' ? 1 : 0);
});
return p;
}
function reduceAdd_bread(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count += (val === 'bread' ? 1 : 0);
});
return p;
}
function reduceRemove_bread(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count -= (val === 'bread' ? 1 : 0);
});
return p;
}
function reduceAdd_orange(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count += (val === 'orange' ? 1 : 0);
});
return p;
}
function reduceRemove_orange(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count -= (val === 'orange' ? 1 : 0);
});
return p;
}
function reduceAdd_meat(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count += (val === 'meat' ? 1 : 0);
});
return p;
}
function reduceRemove_meat(p, v){
if (v.items[0] ==="") return p; // skip empty values
p.state = v.state;
v.items.forEach(function(val, idx){
p.count -= (val === 'meat' ? 1 : 0);
});
return p;
}
function reduceAdd_group1(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="bread"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A += (val2 === 'A' ? 1 : 0);
p.O += (val2 === 'O' ? 1 : 0);
p.C += (val2 === 'C' ? 1 : 0);
p.R += (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceRemove_group1(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="bread"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A -= (val2 === 'A' ? 1 : 0);
p.O -= (val2 === 'O' ? 1 : 0);
p.C -= (val2 === 'C' ? 1 : 0);
p.R -= (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceAdd_group2(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="apple"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A += (val2 === 'A' ? 1 : 0);
p.O += (val2 === 'O' ? 1 : 0);
p.C += (val2 === 'C' ? 1 : 0);
p.R += (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceRemove_group2(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="apple"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A -= (val2 === 'A' ? 1 : 0);
p.O -= (val2 === 'O' ? 1 : 0);
p.C -= (val2 === 'C' ? 1 : 0);
p.R -= (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceAdd_group3(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="orange"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A += (val2 === 'A' ? 1 : 0);
p.O += (val2 === 'O' ? 1 : 0);
p.C += (val2 === 'C' ? 1 : 0);
p.R += (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceRemove_group3(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="orange"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2){
p.A -= (val2 === 'A' ? 1 : 0);
p.O -= (val2 === 'O' ? 1 : 0);
p.C -= (val2 === 'C' ? 1 : 0);
p.R -= (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceAdd_group4(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="meat"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A += (val2 === 'A' ? 1 : 0);
p.O += (val2 === 'O' ? 1 : 0);
p.C += (val2 === 'C' ? 1 : 0);
p.R += (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceRemove_group4(p, v) {
if (v.items[0] ==="") return p; // skip empty values
if (v.status[0] ==="") return p; // skip empty values
v.items.forEach(function(val1, idx1){
if (val1 ==="meat"){
v.status.forEach (function(val2, idx2) {
if (idx1 === idx2) {
p.A -= (val2 === 'A' ? 1 : 0);
p.O -= (val2 === 'O' ? 1 : 0);
p.C -= (val2 === 'C' ? 1 : 0);
p.R -= (val2 === 'R' ? 1 : 0);
}
});
}
});
return p;
}
function reduceAdd_group(p, v) {
if (v.status[0] ==="") return p; // skip empty values
v.status.forEach (function(val, idx) {
p[val] = (p[val] || 0) + 1;
});
return p;
}
function reduceRemove_group(p, v) {
if (v.status[0] ==="") return p; // skip empty values
v.status.forEach (function(val, idx) {
p[val] = (p[val] || 0) - 1;
});
return p;
}
function reduceInitial_group() {
return {
A: 0,
O: 0,
C: 0,
R: 0
};
}
function reduceInitial_items(){
return {
count: 0,
state: ''
};
}
//filter function:
function myFilterFunction (dimension, filters) {
dimension.filter(null);
if (filters.length === 0)
dimension.filter(null);
else
dimension.filterFunction(function (d) {
for (var i=0; i < d.length; i++) {
if (filters.indexOf(d[i]) >= 0) return true;
}
return false;
});
return filters;
}
//all function:
function myAllFunction() {
var newObject = [];
for (var key in this) {
if (this.hasOwnProperty(key) && key !="all") {
newObject.push({
key: key,
value: this[key]
});
}
}
return newObject;
};