我是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}}
]
我已经有一个饼图,其中每个图块代表城市。现在,我要做的是单击特定的饼图(例如“ New York”)时,我想要一个行图,以纽约作为维度显示术语数组值。我不确定我是否在这里使用正确的术语,但实际上我想将饼图用作摘要视图,将行图用作向下钻取以显示每个城市的术语。
我该如何使用Crossfilter?我实际上是在使用dc.js,但是在dc.js为我呈现它之前,我仍然必须为Crossfilter创建尺寸和组。
首先,我将对您的数据进行一些重组-这样的方法可能对您很有效:
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
}];
这是一个有关我为什么要展平数据的相关stackoverflow问题:Crossfilter是否需要展平数据结构?
在这里,您可以为城市和社区创建维度和组:
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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句