DC.js

Question

我的数据集类似于 this。

name,code,proc,subP,date,m,a,b,o,t
BW,1333,29,1,2015-12-29 02:30:00,10,0,0,0,10
BW,1333,29,1,2015-12-29 12:00:00,25,0,0,0,25
BW,1333,29,1,2015-12-30 12:00:00,26,0,0,0,26
BW,1333,29,2,2015-12-31 12:00:00,27,0,0,0,27
BW,1333,29,2,2016-01-01 12:00:00,26.1,4.9,1.8,0,32.8
BW,1333,29,2,2016-01-02 12:00:00,26.4,4.9,1.9,0,33.2
BW,1333,29,2,2016-01-03 12:00:00,26.2,4.9,1.9,0,33
...
NS,1212,11,1,2016-07-28 15:30:00,1.6,3.7,4.4,0,9.7
NS,1212,11,1,2016-07-29 12:00:00,17.4,2.3,0,0,19.7
NS,1212,11,1,2016-07-30 12:00:00,21,5,14.1,0,40.1
NS,1212,11,2,2016-07-31 11:12:00,18.1,3.5,6.1,0,27.7
NS,1212,11,2,2016-07-31 12:00:00,0.1,0.2,0.2,0,0.5
NS,1212,11,2,2016-08-01 12:00:00,0.1,2.7,2.6,0,5.4

我正在使用复合折线图来表示此数据。

我正在使用 select 菜单来过滤 'BW' 和 'NS' 记录。但是当我使用 selectmenu 时，合成图表保持不变。

我将数据分成两个单独的文件（一个有 'BW' 条记录，另一个有 'NS' 条记录）以尝试实现 selection 中提供的数据功能 dc.js Series Chart example。那也没用。

Here is a fiddle with one of the charts.

最后，我想通过 'BW' 和 'NS' 记录过滤多个图表（复合图、系列图和气泡图），有或没有 select 菜单。

我该如何实施？

Answer 1

问题不在于您的 selectMenu 或您的复合图表，而在于您减少数据的方式。

第一个参数group.reduce()是add函数，第二个参数是remove函数，最后一个是初始化函数

您通常不想直接从 v 设置 p，因为您正在这样做：

var grp = dim.group().reduce(
          function(p,v){
            p.m = +v.m;
            p.a = +v.a;
            p.b = +v.b;
            return p;
          },
          function(p,v){
            p.m = +v.m;
            p.a = +v.a;
            p.b = +v.b;
            return p;
          },
          function(){return {m:0, a:0, b:0}; });

只有当每个键都完全唯一并且没有两个项目落入同一个垃圾箱时，这才有效。

而且您几乎不想在删除函数中从 v 设置 p。这将防止任何东西被删除。

相反，像这样添加和减去值：

var grp = dim.group().reduce(
          function(p,v){
            p.m = p.m + +v.m;
            p.a = p.a + +v.a;
            p.b = p.b + +v.b;
            return p;
          },
          function(p,v){
            p.m = p.m - +v.m;
            p.a = p.a - +v.a;
            p.b = p.b - +v.b;
            return p;
          },
          function(){return {m:0, a:0, b:0}; });

这里是 working fork of your fiddle。

DC.js - Select 菜单作为复合图表的过滤器

DC.js - Select Menu as a filter for Composite charts

d3.js

composite

jquery-ui-selectmenu