D3 交叉过滤器基本示例

Posted 2023-02-22

【中文标题】D3 交叉过滤器基本示例

【英文标题】：D3 Crossfilter basic example

【发布时间】：2012-09-23 11:46:03

【问题描述】：

我刚刚被介绍给 D3，非常喜欢 crossfilter library。我想生成类似的东西，但不是他们的航班数据，而是格式为：行、列、值的 CSV 数据。

我只想要一个显示值的直方图和一个按值字段排序的表格。

很难理解他们的例子中发生了什么。

有人可以建议或展示一个非常基本的例子吗？

【问题讨论】：

工作演示：bl.ocks.org/lmatteis/efd9be8f472e673eef6ce9d1951256a9 与问题无关。但经过研究，我发现了一个不使用 dc.js 的有效解决方案，因此将其发布在这里。

【参考方案1】：

这个页面有一些很好的入门教程。 https://github.com/mbostock/d3/wiki/Tutorials

D3 的学习曲线非常陡峭，在理解交叉过滤器示例之前，您需要先了解以下示例：

d3.selectAll d3.nest（如何将平面数据列表转换为结构） select.transition 等

前 7 个教程由 D3 作者编写，它将教您这些基本概念。 （第二个最直观） Scott Murray 的示例非常容易理解，并且与原始示例相比似乎学起来更快。 Christophe Viau 的教程简短易学，但不一定涵盖足够的细节。

我也是 D3 的新手，但发现这个库非常聪明和强大。祝你好运

【讨论】：

我认为提供的链接中有很多可靠的教程，对于那些刚接触 D3 的人，我还想推荐 Mike Dewar 的“D3 入门”。

我最终使用了 DC javascript 包，它有助于使用 crossfilter 的条形图。不过感谢您的建议。在我使用它之前，我最终浏览了几个教程

我很困惑 - 你能单独使用 D3 以及使用 DC.js 创建交叉过滤器类型的可视化吗？

【参考方案2】：

我遇到了一个很棒的图书馆，可以为我做这件事。

dc.js

【讨论】：

我很困惑 - 你能单独使用 D3 以及使用 DC.js 创建交叉过滤器类型的可视化吗？ DC.js 不是也用 D3 吗？

是的，从技术上讲你可以。 DC 只是 D3 的包装器，因此您不必自己创建任何东西

我尝试了 dc.js，它很好地集成了开箱即用的交叉过滤器支持。 dc.js 有一个简单的 API 可以使用。该库有助于更轻松地创建交互式、焦点和上下文、主控和细节、刷图。

我还提供了my blog上的条形图和交叉过滤器的代码示例

【参考方案3】：

希望此链接提供了一个非常基本的示例，可以帮助任何绊倒的人：Very simple JS Fiddle example

    var data = crossfilter([
        date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab",
        date: "2011-11-14T16:20:19Z", quantity: 2, total: NaN, tip: 100, type: "tab",
        date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa",
        date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab",
        date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab",
        date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab",
        date: "2011-11-14T16:54:06Z", quantity: 1, total: NaN, tip: null, type: "cash",
        date: "2011-11-14T17:02:03Z", quantity: 2, total: 90, tip: 0, type: "tab",
        date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab",
        date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab",
        date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: null, type: "cash",
        date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"]);

    try 
        var total_dimension = data.dimension(function(d)  return d.total; );
    var na_records = total_dimension.filter(90).top(Infinity);
    var elRecords = $('ul#records'); 
    elRecords.empty();
    for (var i = 0; i < na_records.length; i++) 
        $('<li>',  text : na_records[i].total).appendTo(elRecords);   
    
 catch (e) 
    console.log(e);

对于图表，我还推荐使用 dc.js 库进行快速原型设计，因为它具有原生 Crossfilter 支持。

看起来没有人真的解决了问题的“基本示例”部分。除了一些 RTFM 类型的链接之外。我同意这一点很重要，但如果人们像我一样，那么他们希望在投入大量时间在基础上之前，快速制作原型作为技术评估的一部分。

【讨论】：

jsfiddle 示例因交叉过滤器链接错误而损坏。这是与工作交叉过滤器链接相同的小提琴：jsfiddle.net/wc8ba/206

【参考方案4】：

到目前为止，我遇到的交叉过滤器的最佳“非常基本”示例来自财富前沿工程博客上的一篇文章。Explore Your Multivariate Data with Crossfilter

fiddle from old articleincludes full code

这里还有一个比较直接的例子：http://bl.ocks.org/phoebebright/3822981http://bl.ocks.org/phoebebright/raw/3822981/