web-dev-qa-db-ja.com

D3クロスフィルターの基本例

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

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

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

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

javascriptcsvd3.jssvgcrossfilter
11
by0

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

dc.js

25
by0

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

ここには、比較的簡単な例もあります。
http://bl.ocks.org/phoebebright/3822981
http://bl.ocks.org/phoebebright/raw/3822981/

14
mg1075

このページには、開始するための優れたチュートリアルがいくつかあります。 https://github.com/mbostock/d3/wiki/Tutorials

D3の学習曲線はかなり急勾配であるため、クロスフィルターの例を理解する前に、次の例を理解する必要があります。

  • d3.selectAll
  • d3.nest（データのフラットリストを構造に変換する方法）
  • select.transition
  • 等.

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

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

8
Zhongjie Wu

うまくいけば、非常に基本的な例を提供するこのリンクが、つまずいた人の助けになるでしょう： 非常に単純な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 ライブラリーもお勧めします。

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

5
Ari Ugwu