Question

我想使用crossfilter ans d3进行多级数组过滤。

App.js如下所示。

    var region = [{
            "code" : "New-York",
            "id"   : 1,
            "centre" : [{
                "name": "xxx",
            "id" : 11
                },{
                "name": "yyy",
                "id" : 12,   
                },{
                "name": "zzz",
                "id" : 13,   
                }]
            },{   
            "code" : "Florida",
            "id"   : 2,
            "centre" : [{
                "name": "aaa",
                "id" : 21
                },{
                "name": "bbb",
                "id" : 23,  
                }]
            },{
            "code" : "Tennessee",
            "id"   : 3,
            "centre" : [{
                "name": "ccc",
                "id" : 31
                }, {
                "name": "ddd",
                "id" : 32,  
                }, {
                "name": "eee",
                "id" : 33,  
                }, {
                "name": "fff",
                "id" : 34,  
                }]
            },{
            "code" : "Jersey",
            "id"   : 3,
            "centre" : [{
                "name": "ccc",
                "id" : 31
                }, {
                "name": "ddd",
                "id" : 32,  
                }, {
                "name": "eee",
                "id" : 33,  
                }, {
                "name": "fff",
                "id" : 34,  
                }]
            }
        ];


$(document).ready(function() {

    var i, allCodeDimensionGroups, currentSet, currentSetSum;    
        regionCrossfilter = crossfilter(region);
        regionsCount = regionCrossfilter.groupAll().value();

        codeDimension = regionCrossfilter.dimension(
        function(regiion) {
        //return region.centre[0].id;
        return regiion.code;
        }),

        codeDimensionGroup = codeDimension.group(),
        table = $('#outputTable'),
        header = $('#outputTable > thead > tr'),
        valuesRow = $('#outputTable > tbody > tr');

    function appendRegionData(region, value) {
        //Adds header cell and value beneath it
        header.append('<th>' + region + '</th>');
        valuesRow.append('<td>' + value + '</td>')
    }   

    appendRegionData('Region', regionsCount);

    allCodeDimensionGroups = codeDimensionGroup.all();
    //ee
    for (i = 0; i < allCodeDimensionGroups.length; i += 1) {
        codeDimension.filter(allCodeDimensionGroups[i].key);
        currentSet = codeDimension.top(Infinity);

        appendRegionData(allCodeDimensionGroups[i].key, currentSet);
    }

    //Reset the filters when you are done
    codeDimension.filterAll();
});

我们能否在表格中显示如下结果。

     New-York       Florida        Jersey
       xxx            aaa            ccc
       yyy            bbb            ddd
       zzz                           eee
                                     fff

我们如何使用crossfilter js和d3 js来做到这一点。

任何帮助都会被接受。

提前致谢。

Answer 1

要获得指定的结果，您不需要d3.js，只需要crossfilter.js。对于实用程序，我还在我的答案中包含了jQuery，以便轻松选择和追加元素。考虑到您已经下载了jquery和crossfilter .js文件，这是HTML标记：

<!DOCTYPE html>
<html>
<head>
    <title>Crossfilter Output</title>
</head>
<body>
    <table id='outputTable'>
        <thead><tr></tr></thead>
        <tbody><tr></tr></tbody>
    </table>

    <script src='jquery.js'></script>
    <script src='crossfilter.js'></script>
    <script src='app.js'></script>     
</body>
</html>

以下是将生成结果的'app.js'文件内容：

var region = [{
            code : 'New-York',
            id   : 1,
            centre : [{
                name: 'xxx',
                id : 11
                },{
                name: 'yyy',
                id : 12,   
                },{
                name: 'zzz',
                id : 13,   
                }]
            },{   
            code : 'Florida',
            id   : 2,
            centre : [{
                name: 'aaa',
                id : 21
                },{
                name: 'bbb',
                id : 23,  
                }]
            },{
            code : 'Tennessee',
            id   : 3,
            centre : [{
                name: 'ccc',
                id : 31
                }, {
                name: 'ddd',
                id : 32,  
                }, {
                name: 'eee',
                id : 33,  
                }, {
                name: 'fff',
                id : 34,  
                }]
            }
        ];


$(document).ready(function() {
    var i, allCodeDimensionGroups, currentSet, currentSetSum
        regionCrossfilter = crossfilter(region);
        regionsCount = regionCrossfilter.groupAll().value();
        codeDimension = regionCrossfilter.dimension(
        function(region) {
            return region.code;
        }),
        codeDimensionGroup = codeDimension.group(),
        table = $('#outputTable'),
        header = $('#outputTable > thead > tr'),
        valuesRow = $('#outputTable > tbody > tr');
    function appendRegionData(region, value) {
        //Adds header cell and value beneath it
        header.append('<th>' + region + '</th>');
        valuesRow.append('<td>' + value + '</td>')
    }   

    appendRegionData('Region', regionsCount);
    allCodeDimensionGroups = codeDimensionGroup.all();
    for (i = 0; i < allCodeDimensionGroups.length; i += 1) {
        codeDimension.filter(allCodeDimensionGroups[i].key);
        currentSet = codeDimension.top(Infinity);
        currentSetSum = 0;
        for(j = 0; j < currentSet.length; j += 1) {
            currentSetSum += currentSet[j].centre.length;
        }
        appendRegionData(allCodeDimensionGroups[i].key, currentSetSum);
    }
    //Reset the filters when you are done
    codeDimension.filterAll();
});

使用crossfilter对多维数组进行分组

1 个答案: