JSON陣列的Crossfilter尺寸

Question

我是Crossfilter的新手，並試圖找出如何爲給定組創建特定組和維度。具體而言，在這裏被簡化JSON我玩：

[ 
    {"name": "New York","count": 354,"terms": [{"name": "N/A","hits": 200 }, {"name": "Brooklyn","hits": 225},{"name": "Queens","hits": 1}}, 
    {"name": "San Francisco","hits": 120,"terms": [{"name": "Chinatown","hits": 268},{"name": "Downtown","hits": 22}}, 
    {"name": "Seattle","hits": 34,"terms": [{"name": "N/A","hits": 2},{"name": "Freemont","hits": 25}} 
] 

我已經有其中每一塊代表着城市的餅圖。現在我想要做的是當我點擊一個特定的餅圖（比如說「紐約」）時，我想要一個顯示紐約作爲維度的術語數組值的行圖。我不確定我是否在這裏使用了正確的術語，但我主要使用餅圖作爲彙總視圖和行圖來展開每個城市的術語。

如何使用Crossfilter做到這一點？我實際上使用了dc.js，但是我仍然需要在dc.js爲我呈現之前爲Crossfilter創建維度和組。

Answer 1

首先，我會重新整理數據位 - 這樣的事情可能會爲你工作得很好：

var data = [{ 
"city": "New York", 
    "neighborhood": "N/A", 
    "hits": 200 
}, { 
"city": "New York", 
    "neighborhood": "Brooklyn", 
    "hits": 225 
}, { 
"city": "New York", 
    "neighborhood": "Queens", 
    "hits": 1 
}, { 
"city": "San Francisco", 
    "neighborhood": "Chinatown", 
    "hits": 268 
}, { 
"city": "San Francisco", 
    "neighborhood": "Downtown", 
    "hits": 22 
}, { 
"city": "Seattle", 
    "neighborhood": "N/A", 
    "hits": 2 
}, { 
"city": "Seattle", 
    "neighborhood": "Freemont", 
    "hits": 25 
}]; 

這是爲什麼我扁平的數據相關的計算器問題：Does Crossfilter require a flat data structure?

從那裏，你可以爲城市和社區創建維度和組：

var ndx = crossfilter(data), 
cityDimension = ndx.dimension(function (d) { 
    return d.city; 
}), 
cityGroup = cityDimension.group().reduceSum(function (d) { 
    return d.hits; 
}), 
neighborhoodDimension = ndx.dimension(function (d) { 
    return d.neighborhood; 
}), 
neighborhoodGroup = neighborhoodDimension.group().reduceSum(function (d) { 
    return d.hits; 
}); 

現在，當您創建圖表時，它們將被連接對彼此的選擇：

pieChart.width(200) 
.height(200) 
.slicesCap(4) 
.dimension(cityDimension) 
.group(cityGroup); 

rowChart.width(500) 
.height(500) 
.dimension(neighborhoodDimension) 
.group(neighborhoodGroup); 

dc.renderAll(); 

下面是本例中的jsfiddle：http://jsfiddle.net/djmartin_umich/Xbd4X/

DC.js還不支持用0值，你可能想在這種情況下默認去除行。

你可能想，如果你希望此行爲是指這個線程：https://groups.google.com/forum/#!topic/dc-js-user-group/WKofifAkThg