在另一個數據集的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或者無論你怎麼稱呼它，並引發圖表重繪考慮到過濾器。