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