使用交叉过滤器组的多维阵列

我想使用交叉过滤器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来做到这一点。

任何帮助将被接受。

在此先感谢。

来源

2014-10-03 DevGo

我尝试了很多搜索，但无法在此获得正确的方法。 – DevGo 2014-10-04 10:23:21

有人帮忙吗？ – DevGo 2014-10-10 06:50:08

要获得指定的结果，您不需要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(); 
});

来源

2014-10-10 14:52:50

谢谢你的帮助。我正在尝试与外部的JSON。我如何使用json文件加载？我们可以使用d3.json吗？我需要显示td中的值的名称。为此我在上面的代码中使用了一些修改，但是我无法获取数据。请检查我的问题。我更新了它。我也可以只显示两个表头？我只想展示佛罗里达州和纽约州，而不是田纳西州。 – DevGo 2014-10-11 10:33:21

使用交叉过滤器组的多维阵列

回答

相关问题