dc图表不互相交互（在服务器端使用crossfilter）

2018-06-11 09:35:54

我对crossfilter和dc非常陌生，目前正试图与他们建立交互式仪表板。当我在客户端进行交叉过滤时，我拥有的数据很容易上升到大约200MB，并且我的浏览器会崩溃，所以在线搜索后，我决定在服务器上运行crossfilter，在客户端上运行dc， 'm继续这里的工作dc.js-server-side-crossfilter但是，直流图表并不互相影响。

所以根据我所了解的基本组件，服务器端app.js处理从客户端app.js发送的Ajax调用，并执行所需的过滤，然后将维度和组以JSON格式发送回客户端，然后我们将创建虚拟维度和组并将它们提供到直方图中，然后每个用户在图表上单击/拖动将再次创建另一个Ajax调用，整个过程再次重复。

在这里，我将这些重要部分张贴在一些伪代码中，因为原始代码看起来很混乱，

服务器端app.js

var app = express();

// define variables that will get passed
var dimensions = {};
var groups     = {};

// handle the ajax call coming from client-side
app.get("/refresh", function(req, res, next){
    var results = {};
    filter = req.query["filter"] ? JSON.parse(req.query["filter"]) : {} 
    for(group_i in groups){
        var group = groups[group_i];
        if(filter[group_i]){
            dimensions[group_i].filter(filter[group_i]);
        }
        results[group_i]= {values:group.all(), 
                           top: group.top(1)[0].value,
                          };
    }
    // send result back in JSON
    res.writeHead(200, { 'content-type': 'application/json' });
    res.end((JSON.stringify(results)));
});

load data into memory {
    // do crossfiltering
    var cf = crossfilter(data);

    // dimensions
    var dateDim = cf.dimension(function(d) {return d['timestamp'];});
    var typeDim = cf.dimension(function(d) {return d['destination_type'];});

    // groups    
    var numByDate = dateDim.group();
    var numByType = typeDim.group();   

    // put these dimensions and groups into corresponding variables
    dimensions.dateDim = dateDim;
    dimensions.typeDim = typeDim;

    groups.numByDate = numByDate; 
    groups.numByType = numByType; 
}

客户端app.js

var timeChart = dc.barChart("#pvs-time-chart");

var filteredData = {};
var queryFilter = {};

var refresh = function(queryFilter){
    // make ajax call
    d3.json("/refresh?filter="+JSON.stringify(queryFilter), function(d){
        filteredData = d;
        dc.redrawAll();
    });
}

var fakeDateDim = {
    filter: function(f){
        if(f){
            queryFilter["dateDim"]=f;
            refresh(queryFilter);
        }
    },
    filterAll: function(){

    }
};

var fakeNumByDate = {
    all: function(){
        try{
            var dateFormat = d3.time.format("%Y-%m-%d");
            filteredData["numByDate"].values.forEach(function (d) {
                d['key'] = dateFormat.parse(d['key']);
            });
        }
        catch(err) {
            // console.log(err);
        }
        return filteredData["numByDate"].values;
    },

    order: function(){

    },

    top: function(){

    }
 };


// Make charts
timeChart
  .width(1200)
  .height(250)
  .margins({top: 10, right: 50, bottom: 30, left: 50})
  .dimension(fakeDateDim)
  .group(fakeNumByDate)
  .transitionDuration(500)
  .x(d3.time.scale().domain([minDate, maxDate]))
  .elasticY(true)
  .renderHorizontalGridLines(true)
  .yAxis().ticks(4);

timeChart
  .filterHandler(function(dimension, filters){
    if (filters) {
      dimension.filter(filters);
    }
    else {
      dimension.filter(null);
    };
   return filters; 
   });

// Similarly for typeChart
var typeChart = dc.rowChart("#dest-type-row-chart");
...


function init(){
    d3.json("/refresh?filter={}", function(err, d){
        filteredData = d;
        dc.renderAll();
    });
}

init();

我很困惑为什么这两个图表没有互相影响，有什么建议？（我很抱歉，如果他们是明显的事情）

编辑：

数据从mongodb数据库加载。

这两个图都显示正确，所以我认为没有数据本身的问题，以及它们是如何分组的。

没有错误被抛出。服务器端调试显示（每个用户点击/拖动）：

GET /refresh?filter={%22dateDim%22:[[%222017-08-13T21:10:30.937Z%22,%222017-
09-08T16:02:52.755Z%22]],%22typeDim%22:
[%22Player%22,%22Schedule%22,%22Other%22,%22Game%20Stats%22]} 200 8.333 ms - 
-

客户端没有显示错误。

问题是，当您在选定的维度和组上创建两个直方图时，它们应该根据用户在两个图表中的任一个上的操作进行交互/更改，但是它现在设置的方式，用户操作（点击/拖动）在任何一个图表上都不会触发对其他图表的更改，但条形图仍可以单击，但没有任何更改。