在另一个数据集的dc.js中添加过滤器

Question

我将两个数据集推入同一页面。

它们都来自单独的mongodb表，但记录通过主键'plankey'链接。

我想从此图中添加一个过滤器到第二个数据集中的过滤器。

主要图表功能：

function loadProjectData(productName) { 
// $('#progress_dialog').show(); 
buildDataLoaded = false; 
$.get('/getbuildresults.json?product=' + productName, function (data) { 
    stats = data; 

    if (stats != null && stats.length > 0) { 
     // Convert dates to real dates 
     stats.forEach(function (d) { 
      d.builddate = new Date(d.builddate); 
     }); 

     // feed it through crossfilter 
     ndx = crossfilter(stats); 


     overall = ndx.dimension(function (d) { 
      return d3.time.month(d.builddate); 
     }); 
     overallGroup = overall.group().reduce(buildReduceAdd, buildReduceRemove, buildReduceInitial); 

     //Test Types Graph Data Sorter 
     testTypesDimension = ndx.dimension(function (d) { 
      return d3.time.week(d.builddate) 
     }) 

    } 


    overallChart = dc.compositeChart("#overall-timeline-chart") 
    .width(chartWidth) // (optional) define chart width, :default = 200 
    .height(250) // (optional) define chart height, :default = 200 
    .transitionDuration(500) // (optional) define chart transition duration, :default = 500    
    .margins({ 
     top: 10, 
     right: 50, 
     bottom: 30, 
     left: 40 
    }) 
     .dimension(failedTestDimension) 
     .group(failedTestDimensionGroup) 
     .elasticY(true) 
     .mouseZoomable(false) 
     .elasticX(false) 
     .renderHorizontalGridLines(true) 
     .x(d3.time.scale().domain(timelineDomain)) 
     .round(d3.time.month.round) 
     .xUnits(d3.time.months) 
     .title(function (d) { 
      return "Value: " + d.value; 
     }) 
     .renderTitle(true) 
     .brushOn(true); 



    // Loop through available plans and create chart for each and then compose 
    var charts = []; 
    var plans = buildGroup.all(); 
    plans.forEach(function (plan) { 

     charts.push(dc.lineChart(overallChart).dimension(failedTestDimension).group(failedTestDimensionGroup) 
      .valueAccessor(function (d) { 
       return d.value.result[plan.key] ? d.value.result[plan.key].failed : null; 
      })); 
    }); 

    overallChart.compose(charts); 

第二个图形功能（这是我想从上面的图中添加过滤器）：

function loadTestResultsData() { 
    // $('#progress_dialog').show(); 
    testDataLoaded = false; 
    $.get('/gettestresults.json', function(data) {  
     stats = data; 


     if (stats != null && stats.length > 0) { 
      // Convert dates to real dates 
      stats.forEach(function (d) { 
       d.rundate = new Date(d.rundate); 
      }); 
      // feed it through crossfilter 
      support_ndx = crossfilter(stats); 


      //Support Cases Chart 

      // Dimension and Group for monthly support cases 
      supportCasesPerMonth = support_ndx.dimension(function(d){ return d.methodName }); 
      supportCasesPerMonthGroup = supportCasesPerMonth.group(); 

     buildTypesChart = dc.rowChart("#failed-tests-chart") 
      .width(750) // (optional) define chart width, :default = 200 
      .height(300) // (optional) define chart height, :default = 200 
      .group(supportCasesPerMonthGroup) // set group 
      .dimension(supportCasesPerMonth) // set dimension 
      // (optional) define margins 
      .margins({ 
       top: 20, 
       left: 10, 
       right: 10, 
       bottom: 20 
      }) 
      // (optional) define color array for slices 
      .colors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb']) 
      // (optional) set gap between rows, default is 5 
      .gap(7); 
     } 

     testDataLoaded = true; 
     dataLoaded(); 
    }); 
}; 

Answer 1

你有两种基本方法。首先是首选。

1）首先加入数据。我会建议使用像queue

queue() 
    .defer(d3.json, '/getbuildresults.json?product=' + productName) 
    .defer(d3.json, '/gettestresults.json') 
    .await(ready); 

function ready(error, products, stats) { 
    var productMap = {}; 
    products.forEach(function (d) { 
     d.builddate = new Date(d.builddate); 
     productMap[d.plankey] = d; 
    }); 
    stats.forEach(function (d) { 
     d.rundate = new Date(d.rundate); 
     $.extend(d, productMap[d.plankey]); 
    }); 

    ndx = crossfilter(stats); 
    // build other dimensions/groups 

    // build charts 

}); 

2）你的另一个选择是使用触发对plankey过滤到图表链接。因此，在两个数据集上，为plankey创建一个交叉过滤器关联维度。然后，从第二张图的过滤器触发，看看有什么plankeys已经在C1PlanKeysDim设置的东西，如

var keys = C2PlanKeysDim.all() 
    .filter(function(d){return d.value>0;}) 
    .map(function(d){return d.key;});` 

然后在图1中，过滤器由key或者无论你怎么称呼它，并引发图表重绘考虑到过滤器。