【问题标题】:Create a crossfilter dimension of structured objects创建结构化对象的交叉过滤器维度
【发布时间】:2025-11-23 06:40:01
【问题描述】:

假设我已经将这些数据推送到交叉过滤器中:

[
    {user: 'abby', town: 'reading', postcode: 'RG'},
    {user: 'ben', town: 'reading', postcode: 'RG'},
    {user: 'charlie', town: 'bristol', postcode:'BS'}
]

请注意数据的扁平化性质 - 邮政编码字段将始终是城镇字段的映射,因此只要城镇 = 阅读,邮政编码将 = RG 等。

我希望能够创建一个来自城镇和邮政编码字段的“城镇”维度,这样当我过滤我的用户维度时,比如使用“abby”,然后是城镇维度,当我调用group().all(),将返回一个数组,如:

[
    {town: 'reading', postcode: 'RG' }
]

这样做的正确方法是什么?

我知道我可以用类似的东西制作城镇维度

var townDimension = myCrossFilter.dimension(function(row) {
    return row.town + ':' + row.postcode;
})

然后,在过滤维度上调用 group().all() 之后,我必须手动将结果字符串列表转换为 {town, postcode} 对象列表。

但是交叉过滤器内部是否支持这样做?

【问题讨论】:

  • 在 Crossfilter 中这样做并不值得,我不认为。我只是在连接城镇和邮政编码的一侧保留一张地图,然后在显示数据时添加邮政编码。如果您必须这样做,您可能需要调查将维度定义为 ["town", "postcode"] 的 2 元素数组是否适合您。
  • 是的,我对这个问题的目的确实是调查是否可以将维度定义为城镇和邮政编码的 2 元素数组。
  • 你试过了吗?我相信它应该工作。虽然我认为你必须使用函数来过滤。
  • 对不起,我没关注你。我试过什么?如果您指的是您的查找建议,不,我没有 - 我希望当我在维度上调用 group().all() 时,我可以使用 crossfilter 基本上为我生成过滤后的查找。但是,我现在也想知道如何在这个城镇维度上设置一个过滤器 - 如果我将一个对象传递给 dimension.filter() 方法,它是否需要是维度中项目的确切实例,或者它会通过匹配 valueOf() 的返回来过滤吗
  • 您是否尝试过使用 2 元素数组? var dim = myCrossFilter.dimension(function(row) { return [row.town, row.postcode];}) 例如。要过滤,您必须使用函数:dim.filter(function(d) { return d[0] === 'reading'; })。这样做的缺点是,与将维度定义为城镇名称然后使用更具体类型的过滤器相比,基于函数的过滤性能更差。

标签: crossfilter


【解决方案1】:

根据 Ethan 的评论,以下代码用于创建维度:

var dim = myCrossFilter.dimension(function(row) { return new KeyValue(row.town, row.postcode);});

为了使其正常工作和过滤,我在我的 KeyValue 对象中覆盖了 valueOf 方法。

我应该提到我实际上是用 Typescript 编写的,而不是 Javascript,所以我的 KeyValue 类的 TypeScript 代码是:

class KeyValue {
    constructor(key: any, value: any) {
        this.key = key;
        this.value = value;
    }

    key: any;
    value: any;

    valueOf(): any {
        return this.key == null ? null : this.key.valueOf();
    }
}

我不确定这是否会对性能产生很大影响 - 我不是基于函数进行过滤,我仍然可以使用如下代码进行过滤:

var options : KeyValue[] = dim.group().all();
var selectedOption : KeyValue = options[3]; //let's say I selected the 4th option
dim.filter(selectedOption);

【讨论】:

    最近更新 更多