我正在创建一个仪表板，数据格式是这样的:
var data = [
{"id": 'CDE', "count": 1, "name": 'ajdkf', "type": 'E', "state": 'A'},
{"id": 'CDE', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'A'},
{"id": 'CDE', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'A'},
{"id": 'CDE', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'A'},
{"id": 'HFG', "count": 1, "name": 'ajdkf', "type": 'E', "state": 'B'},
{"id": 'HFG', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'B'},
{"id": 'HFG', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'B'},
{"id": 'HFG', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'B'},
{"id": 'ABF', "count": 1, "name": 'ghedw', "type": 'G', "state": 'A'},
{"id": 'ABF', "count": 0, "name": 'ghedw', "type": 'G', "state": 'A'},
{"id": 'ABF', "count": 0, "name": 'ghedw', "type": 'G', "state": 'A'},
{"id": 'ABF', "count": 0, "name": 'ghedw', "type": 'G', "state": 'A'},
{"id": 'DEF', "count": 1, "name": 'huiqs', "type": 'E', "state": 'A'},
{"id": 'DEF', "count": 0, "name": 'huiqs', "type": 'E', "state": 'A'},
{"id": 'DEF', "count": 0, "name": 'huiqs', "type": 'E', "state": 'A'},
{"id": 'DEF', "count": 0, "name": 'huiqs', "type": 'E', "state": 'A'},
...
{"id": 'ABC', "count": 1, "name": 'asbsd', "type": 'D', "state": 'B'},
{"id": 'ABC', "count": 0, "name": 'asbsd', "type": 'D', "state": 'B'},
{"id": 'ABC', "count": 0, "name": 'asbsd', "type": 'D', "state": 'B'},
{"id": 'ABC', "count": 0, "name": 'asbsd', "type": 'D', "state": 'B'}
];
我正在尝试创建一个如下所示的表格:
Name State A Count State B Count
ajdkf 1 1
ghedw 1 0
huiqs 1 0
asbsd 0 1
我目前有:
<body>
<div style='clear:both;'>
<table id="Stats">
<thead>
<tr class="header">
<th> name </th>
<th> State A Count </th>
<th> State B Count </th>
</tr>
</thead>
</table>
</div>
</body>
<script>
...
var dataTable = dc.dataTable("#Stats");
var dataTableDim = ndx.dimension(function(d) {return d.name;});
dataTable
.dimension(dataTableDim)
.group(function(d) {return d.name})
.columns([
function(d) { return d.name; },
function(d) { if (d.state == 'A') {return +d.count;} else {return 0;} },
function(d) { if (d.state == 'B') {return +d.count;} else {return 0;} },
]);
...
</script>
它给了我一张看起来像这样的表:
Name State A Count State B Count
asbsd
asbsd 0 1
asbsd 0 0
asbsd 0 0
asbsd 0 0
ajdkf
ajdkf 1 0
ajdkf 0 0
ajdkf 0 0
ajdkf 0 0
ajdkf 0 1
ajdkf 0 0
ajdkf 0 0
ajdkf 0 0
huiqs
huiqs 1 0
huiqs 0 0
huiqs 0 0
huiqs 0 0
ghedw
ghedw 0 0
ghedw 1 0
ghedw 0 0
ghedw 0 0
我需要做什么才能得到我想要的 table ？我希望在“A 州”下有 2 个“列”(计数和百分比)，B 州也一样。类似:
Name State A State B
Count Percent Count Percent
jsfiddle: https://jsfiddle.net/56hgjgsz/14/
我无法获取读取外部文件的 fiddle ，所以我不得不将它们添加到 js.. 抱歉 :( ( https://jsfiddle.net/56hgjgsz/29/ )
这“有效”，但不会减少表中的行，并且顺序是向后的 -> 相同的地址，但使用/32/而不是/14/或/29/
最佳答案
在 dc.js 出现几年后，人们发现您实际上可以传递一个 group 作为数据表的 .dimension()。这就是您在这里想要的，因为您正在执行交叉过滤器缩减以获得状态计数。
这是 noted in the documentation here .
减少交叉过滤器组中多个值的方法是标准的:
var dataTableGroup = dataTableDim.group().reduce(
function(p, v) {
++p.number;
p.total += +v.count;
p.stateA += (v.state === 'A' ? v.count : 0);
p.stateB += (v.state === 'B' ? v.count : 0);
return p;
},
function(p, v) {
--p.number;
p.total -= +v.count;
p.stateA -= (v.state === 'A' ? v.count : 0);
p.stateB -= (v.state === 'B' ? v.count : 0);
return p;
},
function() {
return {
number: 0,
total: 0,
stateA: 0,
stateB: 0
}
}
);
然后我们可以为数据表创建一个“假维度”来读取顶部或底部的 N 个值，只保留具有 stateA 或 stateB 值的 bin >。请注意，我们必须传递 N，这与假组不同:
function remove_empty_bins_dt(source_group) {
return {
top: function(N) {
return source_group.top(N).filter(function(d) {
return d.value.stateA !== 0 || d.value.stateB !== 0;
});
},
bottom: function(N) { // hacky but should work
return source_group.top(Infinity).filter(function(d) {
return d.value.stateA !== 0 || d.value.stateB !== 0;
}).slice(-N).reverse();
}
};
}
同样，数据表在 dc.js 中是独一无二的，因为它旨在从交叉过滤器维度而不是组中读取数据。所以我们需要将这个假尺寸传递给 .dimension() 而不是 .group() (which means something completely different 叹息)
你的 fiddle 的工作叉:https://jsfiddle.net/gordonwoodhull/d86foxyq/5/
(如果我理解正确的话)
可以将其概括为查看任意数量的字段，但我今天没时间了。 😉
关于javascript - dc.js - dataTable -- 组合数据行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34403329/