来自 JSON 数组的交叉过滤维度答案

【问题标题】：Crossfilter dimension from JSON array来自 JSON 数组的交叉过滤维度
【发布时间】：2023-03-03 07:44:23
【问题描述】：

我是一名 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 创建维度和组。

【问题讨论】：

标签： javascript json visualization crossfilter dc.js

【解决方案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
}];

这里有一个相关的 stackoverflow 问题，说明我为什么要扁平化数据：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

【讨论】：

这太棒了！谢谢。