Question

我正在创建一个仪表板，数据格式如下：

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

我需要做些什么来获得我想要的桌子？我很想拥有A＆＃34; A＆＃34; 2＆＃39;列＆＃39; （计数和百分比）和状态B相同。

Name        State A              State B
        Count     Percent    Count     Percent

的jsfiddle： https://jsfiddle.net/56hgjgsz/14/

我无法读取外部文件的小提琴，所以我不得不将它们添加到j ..抱歉:(（https://jsfiddle.net/56hgjgsz/29/）

这＆＃34;工作＆＃34;但是没有在表格中进行行减少而且排序是向后的 - ＆gt;相同的地址，但用/ 32 /而不是/ 14 /或/ 29 /

Answer 1

在dc.js发布几年后，人们发现您实际上可以将组作为.dimension()传递给数据表。这就是你想要的，因为你正在进行跨滤波器缩减以获得状态计数。

Here's an example.（source）

这是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
    }
  }
);

然后我们可以制作一个假的维度＆＃34;使数据表读取顶部或底部N值，仅保留具有stateA或stateB值的容器。请注意，我们必须通过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叹气）

小提琴的工作叉：https://jsfiddle.net/gordonwoodhull/d86foxyq/5/

（如果我理解正确的话）

人们可以概括地看一下任意数量的字段，但今天我没有时间。

dc.js - dataTable - 组合数据行

1 个答案: