11

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

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

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

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

4

4 回答 4

26

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

dc.js

于 2013-01-10T16:27:52.320 回答
15

到目前为止，我遇到的交叉过滤器的最佳“非常基本”示例来自财富前沿工程博客上的一篇文章。
使用 Crossfilter 探索您的多元数据

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

于 2013-09-24T12:33:28.033 回答
8

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

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

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

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

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

于 2012-10-02T21:42:53.380 回答
6

希望这个提供了一个非常基本的示例的链接将帮助任何绊倒的人：非常简单的 JS Fiddle 示例

    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 类型的链接之外。我同意这一点很重要，但如果人们像我一样，那么他们希望在投入大量时间在基础上之前，快速制作原型作为技术评估的一部分。

于 2013-04-23T20:58:24.923 回答