11

私はD3を紹介されたばかりで、クロスフィルターライブラリが本当に好きです。似たようなものを生成したいのですが、フライトデータの代わりに、row、col、valueの形式のCSVデータがあります。

値を示すヒストグラムと、値フィールドでソートされたテーブルが欲しいのですが。

彼らの例で何が起こっているのかを理解するのは非常に困難です。

誰かが非常に基本的な例を提案または示すことができますか？

4

4 に答える 4

26

私は私のためにこれを行う素晴らしいライブラリに出くわしました。

dc.js

于 2013-01-10T16:27:52.320 に答える
15

私がこれまでに出くわしたクロスフィルターの最も良い「非常に基本的な」例は、wealthfrontEngineeringブログの投稿からのものです。
クロスフィルターを使用して多変量データを探索する

ここには比較的簡単な例もあります：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の作成者によって作成されており、これらの基本的な概念を説明します。（2番目の例が最も直感的です）Scott Murrayの例は非常に理解しやすく、元の例に比べて習得が速いようです。Christophe Viauのチュートリアルは短くて習得が早いですが、必ずしも十分な詳細を網羅しているわけではありません。

私もD3を初めて使用しますが、このライブラリは非常にスマートで強力であることがわかりました。幸運を

于 2012-10-02T21:42:53.380 に答える
6

非常に基本的な例を提供するこのリンクが、つまずいた人に役立つことを願っています：非常に単純なJSフィドルの例

    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ライブラリーもお勧めします。

質問の「基本的な例」の部分に実際に取り組んだ人はいないようです。いくつかのRTFMタイプのリンクは別として。私が同意することは重要ですが、人々が私のようである場合、彼らはファンダメンタルズに多くの時間を投資する前に、技術評価の一部として何かを迅速にプロトタイプ化したいと考えています。

于 2013-04-23T20:58:24.923 に答える