D3交叉过滤器基本示例

Question

我刚刚被介绍给D3，真的很喜欢crossfilter library。我想生成类似的内容，但不是航班数据，而是CSV数据，格式为：行，列，值。

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

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

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

Answer 1

我遇到了一个很棒的图书馆，它将为我做到这一点。

dc.js

Answer 2

到目前为止，我遇到的最好的交叉过滤器“非常基础”示例来自于Richfront Engineering博客上的帖子。Explore Your Multivariate Data with Crossfilter

• [fiddle from old article includes full code

这里还有一个相对简单的示例：http://bl.ocks.org/phoebebright/3822981http://bl.ocks.org/phoebebright/raw/3822981/

Answer 3

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

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

• d3.selectAll
• d3.nest（如何将数据的平面列表隐藏到结构中]
• select.transition
• 等

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

我也是D3的新手，但发现此库非常聪明且功能强大。祝你好运

Answer 4

希望此链接提供了一个非常基本的示例，它将帮助那些偶然发现的人：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类型的链接之外。我同意这一点很重要，但是如果人们像我一样，那么他们希望在将大量时间投入到基础知识之前，快速将某些东西作为技术评估的一部分进行原型化。