使用交叉過濾器組的多維陣列

我想使用交叉過濾器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

使用交叉過濾器組的多維陣列

回答

相關問題