从另一个数据集中在 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 创建一个交叉过滤链接维度。然后，在第二个图表的过滤器触发器上，查看哪些 plankeys 已设置为类似

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

然后在图表 1 上，按C1PlanKeysDim 上的key 或任何您称之为的过滤器进行过滤，并触发图表重绘以考虑过滤器。