Dcjs-quick-guide

提供：Dev Guides
移動先:案内、検索

DC.js-はじめに

DC.jsは、ブラウザー、モバイルデバイスでのデータ分析のための優れたJavaScriptライブラリであり、最終的にデータの視覚化の作成に役立ちます。 データの視覚化とは、データを画像形式またはグラフィカル形式で表示することです。 データの視覚化の主な目的は、統計グラフィックス、プロット、情報グラフィックスを介して情報を明確かつ効率的に伝えることです。 データの視覚化は、さまざまなJavaScriptフレームワークを使用して、通常のWebアプリケーションやモバイルアプリケーションでも開発および統合できます。

DC.jsとは何ですか？

DC.jsは、大規模な多次元データセットを探索するためのチャートライブラリです。 D3.jsエンジンに依存して、CSSに適したSVG形式でグラフをレンダリングします。 複雑なデータの視覚化を可能にし、棒グラフ、散布図、ヒートマップなどを含む設計されたダッシュボードを備えています。 DC.jsは、データ操作のために Crossfilter と連携するように構築されています。 DC.jsを使用すると、高度な自動フィルタリングオプションを使用して、多数の相互接続されたグラフで単一の（大規模な）データセットを視覚化できます。

DC.jsが必要な理由

一般に、データの視覚化は非常に複雑なプロセスであり、クライアント側で実行するには追加のスキルが必要です。 DC.jsを使用すると、より単純なプログラミングモデルを使用して、ほぼすべての種類の複雑なデータ視覚化を作成できます。 これはオープンソースであり、JavaScriptライブラリを非常に簡単に選択できるため、非常に短時間で適切なカスタムビジュアライゼーションを実装できます。

DC.jsチャートはデータ駆動型であり、非常に反応的です。 さらに、* Crossfilterライブラリ*を使用して、ユーザーインタラクションに即座にフィードバックを提供します。

DC.jsの機能

DC.jsは最高のデータ視覚化フレームワークの1つであり、単純な視覚化と複雑な視覚化を生成するために使用できます。 顕著な特徴のいくつかを以下に示します-

  • 非常に柔軟です。
  • 使いやすい。
  • チャートの高速レンダリング。
  • 大規模な多次元データセットをサポートします。
  • オープンソースのJavaScriptライブラリ。

Dc.jsの利点

DC.jsはオープンソースプロジェクトであり、他と比較した場合に必要なコードが少なくなります。 次の利点があります-

  • 優れたデータ視覚化。
  • グラフィカルフィルタリングを実行します。
  • チャートとダッシュボードの高速作成。
  • 高度にインタラクティブなダッシュボードの作成。

次の章では、システムにD3.jsをインストールする方法を理解します。

DC.js-インストール

この章では、DC.js開発環境をセットアップする方法を学びます。 始める前に、次のコンポーネントが必要です-

  • DC.jsライブラリ
  • 編集者
  • ウェブブラウザ
  • Webサーバー

手順を1つずつ詳しく見ていきましょう。

DC.jsのインストール

DCのインストールは非常に簡単にセットアップできます。 以下の手順に従って、_DC_をマシンにインストールします。

DCライブラリをダウンロード

DCはオープンソースのライブラリです。リンクhttps://github.com/dc-js/dc.js/releasesを使用してファイルをダウンロードします。

DCファイルの最新バージョンをダウンロードします。 （現在、最新バージョンは2.0.2です。） ダウンロードが完了したら、DCフォルダーを解凍し、プロジェクトのルートフォルダーまたはすべてのライブラリファイルを保持する他のフォルダーに貼り付けます。

サンプルHTMLページは次のとおりです。 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <script>
        //write your dc code here..
      </script>
   </body>
</html>

DCはJavaScriptコードであるため、「script」タグ内にすべてのDCコードを記述する必要があります。 既存のDOM要素を操作する必要がある場合があるため、「body」タグの終わりの直前にDCコードを記述することをお勧めします。

DC.jsエディター

コードの記述を開始するにはエディターが必要です。 次のようなJavaScriptをサポートする優れたIDE（統合開発環境）がいくつかあります-

  • Visual Studioコード
  • WebStorm
  • エクリプス
  • SublimeText

これらのIDEは、最新のJavaScriptフレームワークの一部をサポートするだけでなく、インテリジェントなコード補完を提供します。 派手なIDEがない場合は、メモ帳、VIなどの基本的なエディターをいつでも使用できます。

ウェブブラウザ

DC.jsは、IE8以前を除くすべてのブラウザーで動作します。

Webサーバー

ほとんどのブラウザは、ローカルファイルシステムからローカルHTMLファイルを直接提供します。 ただし、外部データファイルの読み込みに関しては一定の制限があります。 このチュートリアルの以降の章では、CSVやJSONなどの外部ファイルからデータをロードします。 したがって、最初からWebサーバーをセットアップする方が簡単です。

任意のWebサーバーを使用できますが、これは快適です。 たとえば、IIS、Apacheなど。

ページを表示する

ほとんどの場合、WebブラウザでHTMLファイルを開くだけで表示できます。 ただし、外部データソースをロードする場合は、ローカルWebサーバーを実行し、サーバー（ http：//localhost：8080 ）からページを表示する方が信頼性が高くなります。

DC.js-コンセプト

DC.jsは、ほとんどのフロントエンド開発者にとってシンプルで簡単です。 D3.jsの知識がなくても、基本的なグラフをすばやく作成できます。 前に、DC.jsを使用して視覚化を作成し始めました。 Web標準に精通する必要があります。 以下のWeb標準は、チャートをレンダリングするためのDC.jsの基盤であるD3.jsで頻繁に使用されます。

  • ハイパーテキストマークアップ言語（HTML）
  • ドキュメントオブジェクトモデル（DOM）
  • カスケードスタイルシート（CSS）

これらの各Web標準を詳細に理解しましょう。

ハイパーテキストマークアップ言語（HTML）

ご存じのように、HTMLはWebページのコンテンツを構造化するために使用されます。 拡張子が「l」のテキストファイルに保存されます。

典型的な基本的なHTMLの例は次のようになります- 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>

   </body>
</html>

ドキュメントオブジェクトモデル（DOM）

HTMLページがブラウザによって読み込まれると、階層構造に変換されます。 HTMLのすべてのタグは、親子階層を持つDOMの要素/オブジェクトに変換されます。 これにより、HTMLがより論理的に構造化されます。 DOMが形成されると、ページ上の要素の操作（追加/変更/削除）が簡単になります。

次のHTMLドキュメントを使用してDOMを理解しましょう- 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

上記のHTMLドキュメントのドキュメントオブジェクトモデルは次のとおりです-

DOM

カスケードスタイルシート（CSS）

HTMLはWebページに構造を提供しますが、CSSスタイルはWebページをより見やすくします。 CSSは、HTMLまたはXML（SVGやXHTMLなどのXML方言を含む）で記述されたドキュメントのプレゼンテーションを記述するために使用されるスタイルシート言語です。 CSSは、Webページで要素をレンダリングする方法を記述します。

JavaScript

JavaScriptは、ユーザーのブラウザーで実行される緩やかに型指定されたクライアント側スクリプト言語です。 JavaScriptはhtml要素（DOM要素）と対話して、Webユーザーインターフェイスをインタラクティブにします。 JavaScriptはECMAScript標準を実装します。これには、ECMA-262仕様に基づくコア機能と、ECMAScript標準に基づかない他の機能が含まれます。 JavaScriptの知識はDC.jsの前提条件です。

コンポーネント

DC.jsは、2つの優れたJavaScriptライブラリに基づいています。

  • クロスフィルター
  • D3.js

クロスフィルター

Crossfilterは、ブラウザで大規模な多変量データセットを探索するためのJavaScriptライブラリです。 生データの数十または数十万行のグループ化、フィルタリング、集約に非常に迅速に使用されます。

D3.js

D3.jsは、データ駆動型ドキュメントの略です。 D3.jsは、データに基づいてドキュメントを操作するためのJavaScriptライブラリです。 D3は、動的、インタラクティブ、オンラインデータ視覚化フレームワークであり、多数のWebサイトで使用されています。 D3.jsは、 Mike Bostock によって作成され、 Protovis と呼ばれる以前の視覚化ツールキットの後継として作成されました。 D3.jsは、数十万のWebサイトで使用されています。

DC.js-クロスフィルターの紹介

クロスフィルターは多次元データセットです。 100万以上のレコードを含むデータセットとの非常に高速な対話をサポートします。

基本概念

クロスフィルターは、クロスフィルター名前空間で定義されます。 セマンティックバージョニングを使用します。 以下で定義されている果物のコレクションでロードされたクロスフィルターオブジェクトを考慮してください- 

var fruits = crossfilter ([
   { name: “Apple”, type: “fruit”, count: 20 },
   { name: “Orange”, type: "fruit”, count: 10 },
   { name: “Grapes”, type: “fruit”, count: 50 },
   { name: “Mango”,  type: “fruit”, count: 40 }
]);

グループ内の合計レコードを実行する必要がある場合、次の機能を使用できます- 

var count = fruits.groupAll().reduceCount().value();

特定のタイプでフィルタリングしたい場合- 

var filtering = fruits.dimension(function(d) { return d.type; });
filtering.filter(“Grapes”)

同様に、クロスフィルターでグループ化を実行できます。 これを行うには、次の機能を使用できます- 

var grouping = filtering.group().reduceCount();
var first = grouping.top(2);

したがって、Crossfilterは非常に高速になるように構築されています。 フィルターの適用時にグループを再計算する場合、増分的に計算します。 クロスフィルターの寸法は非常に高価です。

クロスフィルターAPI

注目すべきCrossfilter APIについて詳しく見ていきましょう。

  • * crossfilter（[records]）*-新しいクロスフィルターの構築に使用されます。 レコードが指定されている場合、指定されたレコードが同時に追加されます。 レコードは、JavaScriptオブジェクトまたはプリミティブの任意の配列にすることができます。
  • * crossfilter.add（records）*-指定されたレコードをクロスフィルターに追加します。
  • * crossfilter.remove（）*-現在のフィルターに一致するすべてのレコードをクロスフィルターから削除します。
  • * crossfilter.size（）*-クロスフィルターのレコード数を返します。
  • * crossfilter.groupAll（）*-すべてのレコードをグループ化し、単一の値に減らすための関数です。
  • * crossfilter.dimension（value）*-指定された値アクセサー関数を使用して新しいディメンションを構築するために使用されます。
  • * dimension.filter（value）*-ディメンションの一致値のレコードをフィルタリングするために使用され、ディメンションを返します。
  • * dimension.filterRange（range）*-range [0]以上でrange [1]未満のディメンションの値のレコードをフィルタリングします。
  • * dimension.filterAll（）*-このディメンションのフィルターをクリアします。
  • * dimension.top（k）*-この次元の自然順序に従って、上位kレコードを含む新しい配列を返すために使用されます。
  • * dimension.bottom（k）*-この次元の自然順序に従って、下位kレコードを含む新しい配列を返すために使用されます。
  • * dimension.dispose（）*-クロスフィルターからディメンションを削除するために使用されます。

次の章では、D3.jsについて簡単に理解します。

DC.js-D3.jsの概要

D3.jsは、ブラウザでインタラクティブな視覚化を作成するために使用されるJavaScriptライブラリです。 D3ライブラリを使用すると、データセットのコンテキストでWebページの要素を操作できます。 これらの要素はHTML、SVG、またはCanvas要素であり、データセットの内容に応じて導入、削除、または編集できます。 これは、DOMオブジェクトを操作するためのライブラリです。 D3.jsは、データ探索の貴重な支援となります。 データの表現を制御し、データの対話性を追加できます。

D3.jsは、他のライブラリに比べて最高のフレームワークの1つです。 それの訳は; Webおよびデータの視覚化で機能し、エンタープライズグレードです。 もう1つの理由は、世界中の開発者が多くの高度なグラフを作成できるようにする柔軟性に優れています。 また、機能を大幅に拡張しました。

次のようなD3.jsの基本的な概念を理解しましょう-

  • セレクション
  • データ結合
  • SVG
  • 遷移
  • アニメーション
  • D3.js API

これらの概念のそれぞれを詳細に理解しましょう。

セレクション

選択は、D3.jsのコアコンセプトの1つです。 CSSセレクターの概念に基づいています。 JQueryを使用し、すでに知っている人は、選択内容を簡単に理解できます。 CSSセレクターに基づいてDOMを選択し、DOMの要素を変更、追加、削除するオプションを提供できます。

データ結合

データ結合は、D3.jsのもう1つの重要な概念です。 選択とともに機能し、データセット（一連の数値）に関してHTMLドキュメントを操作できます。 デフォルトでは、D3.jsはメソッド内でデータセットに最高の優先度を与え、データセット内の各アイテムはHTML要素に対応します。

SVG

SVGは Scalable Vector Graphics の略です。 SVGは、XMLベースのベクターグラフィックス形式です。 線、長方形、円、楕円などのさまざまな形状を描画するオプションを提供します。 したがって、SVGを使用して視覚化を設計すると、より強力で柔軟になります。

変換

SVGは、単一のSVG形状要素またはSVG要素のグループを変換するオプションを提供します。 SVG変換は、変換、拡大縮小、回転、および傾斜をサポートしています。

遷移

遷移とは、アイテムのある状態から別の状態に変化するプロセスです。 D3.jsは、HTMLページで遷移を実行するtransition（）メソッドを提供します。

アニメーション

D3.jsは、遷移によるアニメーションをサポートしています。 アニメーションは、トランジションを適切に使用して実行できます。 トランジションは、 start と end の2つのキーフレームのみを含むキーフレームアニメーションの限定された形式です。 通常、開始キーフレームはDOMの現在の状態であり、終了キーフレームは指定した属性、スタイル、およびその他のプロパティのセットです。 遷移は、開始ビューに依存する複雑なコードなしで新しいビューに遷移するのに適しています。

D3.js API

重要なD3.js APIのメソッドの一部を簡単に理解しましょう。

コレクションAPI

コレクションは、複数の要素を単一のユニットにグループ化する単なるオブジェクトです。 コンテナとも呼ばれます。 オブジェクト、マップ、セット、ネストが含まれています。

パスAPI

パスは、長方形、円、楕円、ポリライン、ポリゴン、直線、曲線を描くために使用されます。 SVGパスは、ストローク、塗りつぶし、クリッピングパスとして使用できる図形、または3つすべての任意の組み合わせが可能な図形の輪郭を表します。

Axis API

D3.jsは、軸を描画する関数を提供します。 軸は、線、目盛り、およびラベルで構成されます。 軸はスケールを使用するため、各軸にはスケールを指定して作業する必要があります。

Zooming API

ズームは、コンテンツのスケーリングに役立ちます。 クリックアンドドラッグアプローチを使用して、特定の地域に集中できます。

区切り文字区切り値API

区切り文字は、プレーンテキストまたはその他のデータの個別の独立した領域間の境界を指定するために使用される1つ以上の文字のシーケンスです。 フィールド区切り文字は、コンマで区切られた値のシーケンスです。 つまり、区切り文字で区切られた値は、コンマ区切り値（CSV）またはタブ区切り値（TSV）です。

DC.js-ミックスイン

Mixinは、JavaScriptクラスで混合して使用できる多くの事前定義関数を備えた*抽象的な機能オブジェクト*です。 ただし、スタンドアロンとして使用することはできません。 たとえば、DC.jsには Mixin および dc.baseMixin があり、これらはそのままでは使用できませんが、折れ線グラフ、円グラフなどのすべてのDCグラフクラスで使用されます。 DC.jsには、チャートを簡単かつ効率的に作成するための便利なMixinの限られたセットがあります。 彼らは次のとおりです-

  • baseMixin -baseMixinは、すべてのタイプのチャートに共通の機能を提供します。 クロスフィルターとd3.js JavaScriptライブラリを統合し、D3.jsの知識が限られているチャートを作成するための簡単な関数セットを提供します。
  • capMixin -capMixinは、制限（cap）未満のデータ要素のグループ化サポートを提供します。
  • colorMixin -colorMixinはチャートの色をサポートします。
  • marginMixin -marginMixinは、チャートのマージンサポートを提供します。
  • coordinateGridMixin -ordinateGridMixinは、チャートの座標サポートを提供します。
  • stackMixin -stackMixinは、 d3.layout.stack を使用してスタッキングサポートを提供します。
  • bubbleMixin -bubbleMixinは、チャートのバブルサポートを提供します。

これらのすべてのミックスインについては、後続の章で詳しく説明します。 Dcjs-basemixin

DC.js-capMixin

*capMixin* を使用すると、特定の値の下にあるデータ要素のリストを「その他」としてグループ化できます。 行グラフと円グラフの両方に適用できます。 capMixinの階層は、次の図で定義されています。

capMixin

capMixinは、その他のセクションを見つけるために4つの方法を提供し、それらは次のとおりです-

方法1：cap（[count]）-キャップに含まれる要素の数を取得または設定します。

方法2：othersGrouper（[grouperFunction]）-「その他」グループを実行する関数を取得または設定します。 提供されるデフォルトの機能は次のとおりです。 

chart.othersGrouper(function (topItems, restItems) {
   var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
   restKeys = restItems.map(_chart.keyAccessor());

   if (restItemsSum > 0) {
      return topItems.concat([{
         others: restKeys,
         key: _chart.othersLabel(),
         value: restItemsSum
      }]);
   }
   return topItems;
});

方法3：othersLabel（[label]）-「その他」グループのラベルを取得または設定します。

方法4：takeFront（[takeFront]）-キャッピングの方向を取得または設定します。 設定されている場合、チャートはデータ要素のソートされた配列からフロントアイテムを取得します。それ以外の場合は、最後のアイテムが使用されます。

DC.js-colorMixin

*colorMixin* は、色を使用して視覚化する必要があるすべてのチャートの色をサポートします。 colorMixinの階層は、次の図で定義されています。

colorMixin

colorMixinは色を操作するためのメソッドの次のリストを提供し、それらは次のとおりです-

colorAccessor（[colorAccessor]）

カラーアクセサー関数を取得または設定します。 これにより、基になるクロスフィルターグループの各データポイントのカラースケールに異なるカラー値がマップされます。 デフォルトのカラーアクセッサは次のとおりです- 

mychart.colorAccessor(function (d, i){return i;})

colorDomain（[ドメイン]）

カラーマッピング関数の現在のドメインを取得または設定します。これは配列として提供する必要があります。

CalculateColorDomain（）

colorAccessor（）関数を使用して見つかったデータ要素の最小値と最大値を決定することにより、カラードメインを設定します。

カラー（[colorScale]）

カラースケールを取得または設定します。 d3.scale を受け入れます。 

chart.colors(d3.scale.category20b());
chart.colors(d3.scale.ordinal().range(['red','green','blue']));

linearColors（r）

補間された線形カラースケールを設定するショートカットメソッド。 

chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);

ordinalColors（r）

順序カラースケールを設定するショートカットメソッド。 

chart.ordinalColors(['red','green','blue']);

DC.js-marginMixin

*marginMixin* は、行チャートと座標グリッドチャートの両方にマージンユーティリティ関数を提供します。 marginMixinの階層は、次の図で定義されています。

marginMixin

marginMixinは、座標軸ベースのチャートのマージンを設定する単一の方法を提供します。

マージン（[マージン]）

チャートの左、右、上、下のマージンを取得または設定します。 グラフのデフォルトのマージンは次のとおりです- 

a. Right - 50
a. Left - 30
a. Top - 10
a. Bottom - 30
var rightMargin = chart.margins().right;//50 by default
chart.margins().bottom = 60;

DC.js -ordinateGridMixin

*coordinateGridMixin* とも呼ばれるCoordinate＆Axisは、棒グラフ、折れ線グラフなどの具体的なグラフタイプに基づいた座標グリッドをサポートするように設計されています。 ordinateGridMixinの階層は、次の図で定義されています。

coordinateGridMixin

ordinateGridMixinは、座標軸を作成する際の作業負荷を軽減するための多くのメソッドをサポートし、それらは次のとおりです-

  • brushOn（[brushOn]）
  • chartBodyG（[body]）
  • clipPadding（[パッド]）
  • elasticX（[X]）
  • focus（[​​範囲]）
  • g（[ルート]）
  • isOrdinal（）
  • mouseZoomable（[ズーム]）
  • rangeChart（[範囲]）
  • ラウンド（r）
  • xAxisMax（）
  • xAxisMin（）
  • xUnitCount（）

これらの各方法について簡単に説明します。

brushOn（[brushOn]）

これは、ブラシベースの範囲フィルターです。 オン/オフを設定できます。 ブラッシングがオンの場合、ユーザーはマウスをチャート上でドラッグできます。 オンにすると、強調表示、ツールヒント、参照線など、チャート上の他のインタラクティブな要素を無効にできます。 以下に定義されています- 

chart.brushOn = function (brushOn) {
   if (!arguments.length) {
      return _brushOn;
   }
   _brushOn = brushOn;
   return chart;
};

chartBodyG（[body]）

チャート本体のSVGグループを取得するために使用されます。 以下に示すように、この関数を呼び出すことができます- 

chart.chartBodyG = function (body) {
   if (!arguments.length) {
      return _chartBodyG;
   }
};

clipPadding（[パッド]）

クリップパスのピクセル単位のパディングを取得または設定するために使用されます。 以下に定義されています- 

chart.clipPadding = function (pad) {
   if (!arguments.length) {
      return _clipPadding;
   }
};

elasticX（[X]）

このメソッドは、弾性X軸の動作をオン/オフするために使用されます。 x軸の弾性がオンになっている場合、グリッドチャートはx軸の範囲を再計算しようとします。 以下で定義されている再描画イベントをトリガーします- 

chart.elasticX = function (X) {
   if (!arguments.length) {
      return _x;
   }
}

同様に、elasticY（[Y]）を実行できます。

focus（[​​範囲]）

このメソッドは、チャートをズームして特定の範囲に焦点を合わせるために使用されます。 指定された範囲は、2つの要素（[start、end]）のみを含む配列でなければなりません。

g（[ルート]）

このメソッドは、ルートg要素を取得または設定するために使用されます。

isOrdinal（）

このメソッドは、チャートの序数xUnitsを返すために使用されます。 ほとんどのチャートは順序データでは異なる動作をし、このメソッドの結果を使用して適切なロジックをトリガーします。

mouseZoomable（[ズーム]）

このメソッドは、マウスのズーム機能を設定または取得するために使用されます。

rangeChart（[範囲]）

インスタンスに関連付けられた範囲選択チャートを取得または設定するために使用されます。

ラウンド（r）

このメソッドは、ブラッシングが有効なときに選択を量子化するために使用される丸め関数を設定または取得するために使用されます。

xAxisMax（）

チャートに表示する最大x値を計算します。 同様に、Y軸についても実行できます。

xAxisMin（）

グラフに表示する最小x値を計算します。 同様に、Y軸についても実行できます。

xUnitCount（）

x軸に表示されるユニットの数を返します。 同様に、Y軸についても実行できます。

DC.js-円グラフ

円グラフは、円形の統計グラフです。 数値の割合を示すためにスライスに分割されます。 この章では、DC.jsを使用して円グラフを描画する方法について詳しく説明します。

円グラフのメソッド

円グラフを描画する前に、 dc.pieChart クラスとそのメソッドを理解する必要があります。 dc.pieChartは、ミックスインを使用して、チャート描画の基本機能を取得します。 dc.pieChartで使用されるミックスインは次のとおりです-

  • baseMixin
  • capMixin
  • colorMixin

dc.pieChartの完全なクラス図は次のとおりです-

円グラフのメソッド

dc.pieChartは、上記の指定されたミックスインのすべてのメソッドを取得するとともに、円グラフを具体的に描画する独自のメソッドを持っています。 彼らは次のとおりです-

  • cx（[cx]）
  • drawPaths（[パス]）
  • emptyTitle（[タイトル]）
  • externalLabels（[ラベル]）
  • innerRadius（[innerRadius]）
  • minAngleForLabel（[minAngleForLabel]）
  • radius（[半径]）
  • slicesCap（[cap]）

これらのそれぞれについて詳しく説明します。

cx（[cx]）

以下で定義されている中心のx座標位置を取得または設定するために使用されます- 

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width()/2);
   }
};

同様に、y座標の位置を実行できます。

drawPaths（[パス]）

このメソッドは、円グラフのパスを描くために使用され、以下に定義されています- 

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle（[タイトル]）

このメソッドは、データがない場合にタイトルを設定するために使用されます。 以下に定義されています- 

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels（[ラベル]）

これは、チャートの外縁からオフセットされたスライスラベルを配置するために使用されます。 以下に定義されています- 

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   }
};

innerRadius（[innerRadius]）

このメソッドは、円グラフの内側の半径を取得または設定するために使用されます。 内側の半径が 0px より大きい場合、円グラフはドーナツグラフとして表示されます。 以下に定義されています- 

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel（[minAngleForLabel]）

このメソッドは、ラベルレンダリングの最小スライス角度を取得または設定するために使用されます。 以下に定義されています- 

 _chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

radius（[半径]）

このメソッドは、外側の半径を取得または設定するために使用されます。 半径が指定されていない場合、チャートの最小幅と高さの半分が必要になります。 以下に定義されています- 

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap（[cap]）

円グラフが生成するスライスの最大数を取得または設定します。 上のスライスは、高から低までの値によって決定されます。 上限を超える他のスライスは、1つの「その他」スライスにまとめられます。

円グラフを描く

DCで円グラフを作成しましょう。 この円グラフの例では、 people.csv ファイルという名前のデータセットを使用します。 サンプルデータファイルは次のとおりです- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

上記のサンプルには多くのレコードが含まれています。 次のリンクをクリックしてファイルをダウンロードし、DCの場所に保存できます。

link：/dcjs/src/people.csv [people.csv]

ここで、DCで円グラフを描画するために次の手順を実行します。

ステップ1：スクリプトを含める

次のコードを使用して、D3、DC、およびクロスフィルターを追加しましょう- 

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

ステップ2：変数を定義する

以下に示すように、 dc.pieChart 型のオブジェクトを作成します- 

var pieChart = dc.pieChart('#pie');

ここでは、パイIDがパイにマッピングされています。

ステップ3：データを読む

  • d3.csv（）*関数を使用して（たとえば、people.csvから）データを読み取ります。 次のように定義されます-
d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

ここで、指定した場所でデータファイルが利用できない場合、d3.csv（）関数はエラーを返します。

ステップ4：クロスフィルターを定義する

クロスフィルターの変数を定義し、データをクロスフィルターに割り当てます。 以下に定義されています- 

var mycrossfilter = crossfilter(people);

ステップ5：ディメンションを作成する

以下の機能を使用して性別の次元を作成します- 

var genderDimension = mycrossfilter.dimension(function(data) {
   return data.gender;
});

ここでは、人々の性別が次元に使用されています。

ステップ6：reduceCount（）

上記で作成した性別ディメンション- groupDimension にgroup（）およびreduceCount（）関数を適用して、クロスフィルターグループを作成します。 

var genderGroup = genderDimension.group().reduceCount();

ステップ7：パイを生成する

以下の機能を使用してパイを生成します- 

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

ここに、

  • 円グラフの幅は800に設定されています。
  • 円グラフの高さは300に設定されています。
  • 円グラフの次元は、dimension（）メソッドを使用して genderDimension に設定されます。
  • 円グラフのグループは、group（）メソッドを使用して genderGroup に設定されます。
  • DC.js組み込みイベント* renderlet（）*を使用してデータを記録するクリックイベントを追加しました。 レンダレットは、チャートがレンダリングまたは描画されるたびに呼び出されます。

ステップ8：作業例

新しいhtmlファイル、pielを作成し、以下に示すように上記のすべての手順を含めます- 

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

           //gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) {
               return data.gender;
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

DC.js-折れ線グラフ

折れ線グラフは、直線で接続された一連のデータポイントとして情報を表示するために使用されます。 データポイントは2つの値を表し、1つは水平軸に沿ってプロットされ、もう1つは垂直軸に沿ってプロットされます。 たとえば、食料品の人気は折れ線グラフとして描画でき、食料品はx軸に沿って表され、その人気はy軸に沿って表されます。 この章では、折れ線グラフについて詳しく説明します。

折れ線グラフのメソッド

折れ線グラフの描画に進む前に、 dc.lineChart クラスとそのメソッドを理解する必要があります。 dc.lineChartは、ミックスインを使用して、チャート描画の基本機能を取得します。 dc.lineChartで使用されるミックスインは次のとおりです-

  • dc.stackMixin
  • dc.coordinateGridMixin

dc.lineChartの完全なクラス図は次のとおりです-

折れ線グラフのメソッド

dc.lineChartは、上記で指定されたミックスインのすべてのメソッドを取得するとともに、折れ線グラフを描画する独自のメソッドを備えています。 以下に説明します。

dashStyle（[スタイル]）

このメソッドは、折れ線グラフのダッシュスタイルを設定するために使用されます。

dotRadius（[半径]）

このメソッドは、データポイントに表示されるドットの半径（PX）を取得または設定するために使用されます。 次のように定義されます- 

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

補間（[i]）

このメソッドは、ラインの補間器を取得または設定するために使用されます。

renderArea（[エリア]）

このメソッドは、レンダリング領域を取得または設定するために使用されます。

renderDataPoints（[オプション]）

このメソッドは、各データポイントの個々のドットをレンダリングするために使用されます。

張力（[張力]）

このメソッドは、描画される線の張力を取得または設定するために使用されます。 0〜1の範囲です。

xyTipsOn（[xyTipsOn]）

このメソッドは、個々のデータポイントのマウスの動作を変更するために使用されます。

折れ線グラフを描く

DCで折れ線グラフを描きましょう。 これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように変数を定義しましょう- 

var chart = dc.lineChart('#line');

ここで、dc.linechart関数は、 id line を持つコンテナーにマップされます。

ステップ2：データを読む

*people.csv* ファイルからデータを読み取ります-
d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

ここで、同じデータセットpeople.csvを使用した場合、サンプルデータファイルは次のようになります- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

...............
................
................

ステップ3：年齢ディメンションを作成する

次に、以下に示すように年齢のディメンションを作成します- 

var ageDimension = mycrossfilter.dimension(function(data) {
    return ~~((Date.now() - new Date(data.DOB))/(31557600000))
});

ここでは、クロスフィルターデータから年齢を割り当てました。

~~は、二重のNOTビット演算子です。 * Math.floor（）*関数のより高速な代替として使用されます。

次に、以下で定義されている* reduceCount（）*関数を使用してグループ化します- 

var ageGroup = ageDimension.group().reduceCount();

ステップ4：チャートを生成する

次に、以下に示すコーディングを使用して折れ線グラフを生成します- 

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

ここに、

  • チャートの幅は800、高さは300です。
  • d3.scale.linear関数は、指定されたドメイン範囲[15、70]で新しい線形スケールを構築するために使用されます。
  • 次に、 brushOn 値をfalseに設定します。
  • y軸ラベルを count として、x軸ラベルを age として割り当てます。
  • 最後に、 ageGroup を使用して年齢をグループ化します。

ステップ5：作業例

完全なコードリストを次のコードブロックに示します。 Webページ linel を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.lineChart('#line');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000))
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

DC.js-棒グラフ

棒グラフは、最も一般的に使用されるグラフのタイプの1つであり、数、頻度、またはその他の測定値を表示および比較するために使用されます（例： 平均）異なる個別のカテゴリまたはグループに対して。 グラフは、さまざまなバーの高さまたは長さが、それらが表すカテゴリのサイズに比例するように構築されます。

x軸（水平軸）は、スケールのないさまざまなカテゴリを表します。 y軸（垂直軸）にはスケールがあり、これは測定単位を示します。 バーは、カテゴリの数とカテゴリの長さまたは複雑さに応じて、垂直または水平に描画できます。

棒グラフのメソッド

棒グラフを描画する前に、 dc.barChart クラスとそのメソッドを理解する必要があります。 dc.barChartは、ミックスインを使用して、チャート描画の基本機能を取得します。 dc.barChartで使用されるミックスインは次のとおりです-

  • dc.stackMixin
  • dc.coordinateGridMixin

dc.barChartの完全なクラス図は次のとおりです-

棒グラフのメソッド

dc.barChartは、上記の指定されたミックスインのすべてのメソッドを取得します。 さらに、棒グラフを描画する独自のメソッドもあります。 彼らは次のように説明されています-

alwaysUseRounding（[ラウンド]）

このメソッドは、バーが中央にあるときに丸めが有効かどうかを取得または設定するために使用されます。

barPadding（[パッド]）

このメソッドは、バーサイズの一部としてバー間の間隔を取得または設定するために使用されます。 可能なパディング値は0〜1です。

centerBar（[centerBar]）

このメソッドは、x軸上のデータ位置を中心としたバーの設定に使用されます。

ギャップ（[ギャップ]）

このメソッドは、バー間の固定ギャップを設定するために使用されます。

outerPadding（[パッド]）

このメソッドは、順序棒グラフの外側のパディングを設定するために使用されます。

棒グラフを描く

DCで棒グラフを描きましょう。 これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように、グラフ変数を定義しましょう- 

var chart = dc.barChart('#bar');

ここで、dc.barChart関数は、 bar をIDとして持つコンテナにマッピングされます。

ステップ2：データを読む

people.csvファイルからデータを読み取ります。 

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。 この例では、次のように見える同じpeople.csvファイルを使用します- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay
..................
..................
..................

ステップ3：年齢ディメンションを作成する

次に、以下に示すように年齢のディメンションを作成します- 

var ageDimension = mycrossfilter.dimension(function(data) {
   return ~~((Date.now() - new Date(data.DOB))/(31557600000))
});

ここでは、クロスフィルターデータから年齢を割り当てました。 ~~は、二重のNOTビット演算子です。 * Math.floor（）*関数のより高速な代替として使用されます。

次に、以下に示す* reduceCount（）*関数を使用してグループ化します- 

var ageGroup = ageDimension.group().reduceCount();

ステップ4：チャートを生成する

次に、以下に示すコーディングを使用して棒グラフを生成します- 

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

ここに、

  • チャートの幅は800、高さは300です。
  • d3.scale.linear関数は、指定されたドメイン範囲[15、70]で新しい線形スケールを構築するために使用されます。
  • 次に、brushOn値をfalseに設定します。
  • y軸ラベルをカウントとして、x軸ラベルを年齢として割り当てます。
  • 最後に、ageGroup関数を使用して年齢をグループ化します。

ステップ5：作業例

完全なコードリストは次のとおりです。 Webページ barl を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC Bar chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "bar"></div>
      </div>

      <script language = "javascript">
         var chart = dc.barChart('#bar');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000))
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

DC.js-複合チャート

複合チャートは、DC.jsが提供する特別なタイプのチャートです。 同じ座標グリッドで複数のチャートをレンダリングするオプションを提供します。 複合チャートにより、最小限のコード行で高度なチャート視覚化オプションが可能になります。

複合チャートメソッド

複合グラフの描画に進む前に、 dc.compositeChart クラスとそのメソッドを理解する必要があります。 dc.compositeChartは、ミックスインを使用して、チャートを描画する基本機能を取得します。 dc.compositeChartで使用されるミックスインは次のとおりです-

  • dc.baseMixin
  • dc.marginMixin
  • dc.colorMixin
  • dc.coordinateGridMixin

dc.barChartの完全なクラス図は次のとおりです-

複合チャートメソッド

dc.compositeChartは、上記で指定されたミックスインのすべてのメソッドを取得します。 以下に説明する複合チャートを描画する独自のメソッドがあります-

compose（[subChartArray]）

同じ座標グリッドチャートで描画されるチャートのコレクションを設定します。 

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

子供（）

同じ座標グリッドで構成されたすべてのチャートを取得します。

childOptions（[childOptions]）

同じ座標グリッドで構成されたすべての子グラフのグラフオプションを取得または設定します。

shareTitle（[shareTitle]）

チャートの共有タイトルを取得または設定します。 設定されている場合、同じ座標グリッドに構成されているすべての子グラフで共有されます。

shareColors（[shareColors]）

shareTitle（）関数に似ていますが、タイトルの代わりに色を共有する点が異なります。

rightY（[yScale]）

複合グラフの右軸のyスケールを取得または設定します。

rightYAxis（[rightYAxis]）

複合グラフの右のY軸を取得または設定します。

rightYAxisLabel（rightYAxisLabel [??]）

右のY軸ラベルを取得または設定します。

alignYAxes（[alignYAxes]）

左右のy軸間の配置を取得または設定します。

useRightAxisGridLines（[useRightAxisGridLines]）

複合グラフの右のY軸からグリッド線を描画するかどうかを取得または設定します。 デフォルトの動作では、左のY軸から描画します。

複合チャートを描く

DC.jsを使用して複合グラフを描画します。 これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように、グラフ変数を定義しましょう- 

var chart = dc.compositeChart('#compoiste');

ここで、dc.compositeChart関数は、IDが composite であるコンテナにマッピングされています。

ステップ2：データを読む

people.csvファイルからデータを読み取ります- 

d3.csv("data/people.csv", function(errors, people) {

}

データが存在しない場合、エラーを返します。 同じpeople.csvファイルを使用します。 サンプルデータファイルは次のとおりです- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.............
.............
..............

ステップ3：データをマッピングする

次に、以下に示すようにデータをマッピングします- 

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB))/(31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

ここでは、クロスフィルターデータから年齢を割り当てました。 ~~は、二重のNOTビット演算子です。 より高速な代替として使用されます。

今、次元年齢を適用し、以下に示すコーディングを使用して性別データをグループ化します- 

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

ステップ4：チャートを生成する

次に、以下に示すコーディングを使用して複合グラフを生成します- 

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])

.brushOn(false)
.render();

ここに、

  • チャートの幅は768、高さは480です。
  • d3.scale.linear関数は、指定されたドメイン範囲[15、70]で新しい線形スケールを構築するために使用されます。
  • 年齢としてx軸ラベルを、カウントとしてy軸ラベルを割り当てます。
  • 次に、水平グリッド線をtrueとしてレンダリングします。
  • 折れ線グラフの色の値を作成します-男性の性別は赤、女性は青です。
  • 最後に、brushOn値をfalseに設定し、チャートをレンダリングします。

ステップ5：作業例

完全なコードは次のとおりです。 Webページ compositel を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

         d3.csv("data/people.csv", function(errors, people) {
            var ndx = crossfilter();

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB))/(31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

DC.js-シリーズチャート

シリーズはデータのセットです。 データに基づいてグラフをプロットできます。 この章では、シリーズチャートの詳細な描画方法について説明します。

シリーズチャートメソッド

シリーズチャートを描画する前に、 dc.seriesChart クラスとそのメソッドを理解する必要があります。 dc.seriesChartは、ミックスインを使用して、チャートを描画する基本機能を取得します。 dc.seriesChartで使用されるミックスインは-

  • dc.stackMixin

dc.seriesChartの完全なクラス図は次のとおりです-

シリーズチャートメソッド

dc.seriesChartは、上記の指定されたミックスインのすべてのメソッドを取得します。 以下に説明するシリーズチャートを描画する独自のメソッドがあります-

チャート（[関数]）

このメソッドは、チャート関数を取得または設定するために使用されます。

seriesAccessor（[アクセサ]）

表示されたシリーズのアクセサー関数を取得または設定するために使用されます。

seriesSort（[sortFunction]）

このメソッドは、シリーズ値を指定してシリーズのリストをソートする関数を取得または設定するために使用されます。

valueSort（[sortFunction]）

このメソッドは、各シリーズの値をソートする関数を取得または設定するために使用されます。

シリーズチャートを描く

DCでシリーズチャートを描画します。 この例では、people_hw.csvという名前のデータセットを使用します。 サンプルデータファイルは次のとおりです- 

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

...............
...............

上記のサンプルファイルには多くのレコードが含まれています。 次のリンクをクリックしてファイルをダウンロードし、DCの場所に保存できます。

link：/dcjs/src/people_hw.csv [people_hw.csv]

ここで、DCでシリーズチャートを描画するために、次の手順に従ってください。

ステップ1：変数を定義する

以下に示すように変数を定義しましょう- 

var chart = dc.seriesChart('#line');

ここでは、seriesChart関数がid行にマッピングされています。

ステップ2：データを読む

people_hw.csvファイルからデータを読み取ります- 

d3.csv("data/people_hw.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。 データを取得したら、それを1つずつ取得し、以下に示すコーディングを使用して性別を確認できます- 

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

ステップ3：年齢ディメンションを作成する

次に、以下に示すように年齢のディメンションを作成します- 

var hwDimension = mycrossfilter.dimension(function(data) {
   return [data.gender, data.height];
});

ここでは、ディメンションを割り当て、性別と高さを返します。 次に、以下で定義されている* reduceCount（）*関数を使用してグループ化します- 

var hwGroup = hwDimension.group().reduceCount();

ステップ4：チャートを生成する

さて、以下に示すコーディングを使用してシリーズチャートを生成します- 

chart
   .width(800)
   .height(600)
   .chart(function(c) {
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
   })

   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

ここに、

  • チャートの幅は800、高さは600です。
  • メソッドd3.scale.linear（）を使用して、ドメイン値を指定します。
  • seriesAccessor関数を使用して、データムのシリーズを表示します。
  • キーと値のアクセサーは、シリーズからキーと値を返します。
  • 凡例を使用して、高さと幅を追加できます。

ステップ5：作業例

完全なコードリストは次のとおりです。 Webページ line_seriesl を作成し、次の変更を追加します。 

<html>
   <head>
      <title>Series chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.seriesChart('#line');

         d3.csv("data/people_hw.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) {
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) {
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

シリーズチャート Dcjs-scatter-plot

DC.js-バブルチャート

バブルチャートを使用して、データの3つのディメンションを表示します。 これは散布図のバリエーションで、データポイントがバブルに置き換えられます。 バブルサイズは、データディメンションに関して表されます。 水平軸と垂直軸を値軸として使用します。 この章では、バブルチャートについて詳しく説明します。

バブルチャートメソッド

バブルチャートの描画に進む前に、 dc.bubbleChart クラスとそのメソッドを理解する必要があります。 dc.bubbleChartはミックスインを使用して、以下にリストされているチャートを描画する基本的な機能を取得します-

  • dc.bubbleMixin
  • dc.coordinateGridMixin

dc.bubbleChartの完全なクラス図は次のとおりです-

バブルチャートメソッド

dc.bubbleChartは、上記で指定されたミックスインのすべてのメソッドを取得します。 また、バブルチャートを描画する独自のメソッドがあります。これについては、以下で説明します-

elasticRadius（[半径]）

このメソッドは、バブルの半径を有効にするために使用されます。 これを無効にすると、バブルの半径は自動的に再スケーリングされます。

sortBubbleSize（[sortBubbleSize]）

このメソッドは、バブルのソート機能を有効にするために使用されます。 小さな気泡が最初に現れ、その後徐々に増加します。

バブルチャートを描く

DCでバブルチャートを描画します。 これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように変数を定義しましょう- 

var chart = dc.bubbleChart('#bubble');

ここでは、bubbleChart関数はidバブルにマッピングされています。

ステップ2：データを読む

*howell1.csv* ファイルからデータを読み取ります。
d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。 ここでは、howell1.csvファイルを既にダウンロードしています。 ここでは同じファイルが使用され、次のコードブロックのようになります。 

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

....................
.....................

ステップ3：レコードを取得する

以下に示すコーディングを使用してレコードをフェッチしましょう- 

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
   x.heightRange = (((Math.floor(x.height/10)) + 1) *10);
   x.weightRange = (((Math.floor(x.weight/10)) + 1)* 10);
});

ここでは、性別を確認し、上記の式を使用してx軸の高さと幅の範囲を設定しました。

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます- 

var genderDimension = mycrossfilter.dimension(function(data) {
   return [ data.gender, data.heightRange, data.weightRange ];
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して性別をグループ化します- 

var genderGroup = genderDimension.group().reduceCount();

ステップ5：チャートを生成する

今、以下に示すコーディングを使用してバブルチャートを生成します- 

chart.width(1200)
   .height(400)
   .margins({top: 10, right: 50, bottom: 30, left: 60})
   .dimension(genderDimension)
   .group(genderGroup)
   .keyAccessor(function (p) {
      return p.key[1];
   })

   .valueAccessor(function (p) {
      return p.key[2];
   })

   .radiusValueAccessor(function (p) {
      return (Math.floor((p.value/10)) + 1);
   })

ここに、

  • チャートの幅を1200に、高さを400に割り当てました。
  • 次に、マージンポイントを指定しました。
  • 次に、性別のディメンションとグループを割り当てました。
  • キーと値のアクセサーは、バブルからキーと値を返します。
  • 式- Math.floor（（p.value/10））+ 1 を使用して、半径値のアクセサー関数を計算します。

ステップ6：泡を描く

今、以下に示すコーディングを使用してバブルを描きます- 

.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
   return p.key[0]
   + "\n"
   + "Height: " + p.key[1] + " cm\n"
   + "Weight: " + p.key[2] + " kg\n"
   + "Count: " + p.value;
});

ここに、

  • d3.scale.linear関数は、x軸に指定されたドメイン範囲[0,240]で新しい線形スケールを作成するために使用されます。
  • 同様に、yと半径の線形スケール値を割り当てました。
  • 最小半径ラベル値を1000、x軸とy軸のパディング値をそれぞれ200と100に指定しました。
  • 次に、最大バブル相対サイズ値として0.7を指定しました。
  • 水平および垂直のグリッド線をレンダリングし、バブルキーと値のタイトルをマップします。

ステップ7：TickFormatを設定する

以下に示すコーディングを使用して、x軸とy軸のチケット形式を設定します- 

chart.yAxis().tickFormat(function (s) {
   return s + " cm";
});

chart.xAxis().tickFormat(function (s) {
   return s + " kg";
});

最後に、* chart.render（）*メソッドを使用してチャートをレンダリングします。

ステップ8：作業例

完全なコードリストは、次のコードブロックに示すとおりです。 Webページ bubblel を作成し、以下の変更を加えます。 

<html>
   <head>
      <title>Bubble chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "bubble"></div>
      </div>

      <script language = "javascript">
         var chart = dc.bubbleChart('#bubble');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
               x.heightRange = (((Math.floor(x.height/10)) + 1) *10);
               x.weightRange = (((Math.floor(x.weight/10)) + 1)* 10);
            });

            var genderDimension = mycrossfilter.dimension(function(data) {
               return [ data.gender, data.heightRange, data.weightRange ];
            });
            var genderGroup = genderDimension.group().reduceCount();

            chart.width(1200)
               .height(400)
               .margins({top: 10, right: 50, bottom: 30, left: 60})
               .dimension(genderDimension)
               .group(genderGroup)
               .keyAccessor(function (p) {
                  return p.key[1];
               })

               .valueAccessor(function (p) {
                  return p.key[2];
               })

               .radiusValueAccessor(function (p) {
                  return (Math.floor((p.value/10)) + 1);
               })

               .x(d3.scale.linear().domain([0, 240]))
               .y(d3.scale.linear().domain([-40, 120]))
               .r(d3.scale.linear().domain([0, 20]))
               .minRadiusWithLabel(1000)
               .yAxisPadding(100)
               .xAxisPadding(200)
               .maxBubbleRelativeSize(0.07)
               .renderHorizontalGridLines(true)
               .renderVerticalGridLines(true)
               .renderLabel(true)
               .renderTitle(true)
               .title(function (p) {
                  return p.key[0]
                  + "\n"
                  + "Height: " + p.key[1] + " cm\n"
                  + "Weight: " + p.key[2] + " kg\n"
                  + "Count: " + p.value;
               });

            chart.yAxis().tickFormat(function (s) {
               return s + " cm";
            });

            chart.xAxis().tickFormat(function (s) {
               return s + " kg";
            });

            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

DC.js-ヒートマップ

ヒートマップは、データをマップ形式でグラフィカルに表現したもので、データ値は色で表されます。 この章では、ヒートマップについて詳しく説明します。

ヒートマップの描画に進む前に、 dc.heatMap クラスとそのメソッドを理解する必要があります。 dc.heatMapはミックスインを使用して、以下にリストされているチャートを描画する基本的な機能を取得します-

  • dc.colorMixin
  • dc.marginMixin
  • dc.baseMixin

dc.heatMapの完全なクラス図は次のとおりです-

ヒートマップ

dc.heatMapは、上記で指定されたミックスインのすべてのメソッドを取得します。 以下に説明するヒートマップを描画する独自のメソッドがあります-

boxOnClick（[handler]）

このメソッドは、ヒートマップで個々のセルがクリックされたときに、ハンドラーを取得または設定するために使用されます。

cols（[cols]）

このメソッドは、キーを取得または設定してヒートマップの列を作成するために使用されます。

colsLabel（[ラベル]）

このメソッドは、列名として表される列ラベルを取得または設定するために使用されます。 同様に、行ラベルも実行できます。

行（[行]）

このメソッドは、ヒートマップの行の作成に使用される値を取得または設定するために使用されます。

xAxisOnClick（[ハンドラー]）

このメソッドは、x軸で列の目盛りがクリックされたときに、ハンドラーを取得または設定するために使用されます。

xBorderRadius（[border]）

このメソッドは、X境界の半径を設定するために使用されます。 値が0に設定されている場合、完全な長方形が表示されます。

ヒートマップを描く

DCでヒートマップを描きましょう。 これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように変数を定義しましょう- 

var chart = dc.heatMap('#heatmap');

ここで、heatMap関数はidヒートマップにマップされます。

ステップ2：データを読む

以下に示すように、 howell1.csv ファイルからデータを読み取ります- 

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

ここでは、同じhowell1.csvファイルを使用しており、以下に示すように見えます- 

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

......................
......................

ステップ3：レコードを取得する

以下に示すコーディングを使用してレコードをフェッチしましょう- 

people.forEach(function(x) {
   x.age = Math.floor(x.age) + 1;
   x.heightRange = Math.floor(x.height/10) + 1;
   x.weightRange = Math.floor(x.weight/10) + 1;
   if(x.male == 1) {
      x.gender = 1;
   } else {
      x.gender = 2;
   }
});

ここでは、上記の式を使用して、性別を確認し、x軸の高さと幅の範囲を設定しました。

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます- 

var ageDimension = mycrossfilter.dimension(function(data) {
   return [+data.gender, +data.heightRange];
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して性別をグループ化します- 

var genderGroup = genderDimension.group().reduceCount();

ステップ5：チャートを生成する

次に、以下に示すコーディングを使用してヒートマップを生成します- 

chart
   .width(20 *45 + 80)
   .height(2* 45 + 40)
   .dimension(ageDimension)
   .group(ageGroup)
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.key[0]; })
   .colorAccessor(function(d) { return +d.value; })
   .title(function(d) {
      return "Height Range:   " + ((d.key[1] - 1) *10) + " - " + (d.key[1]* 10) + "cm\n" +
      "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
      "Count: " + (d.value) + " count";
   })
   .calculateColorDomain()

chart.render();
});

ここに、

  • グラフの幅を20×45 + 80に、高さを2×45 + 40に割り当てました。
  • 次に、性別のディメンションとグループを割り当てました。
  • キーと値のアクセサーは、ヒートマップからキーと値を返します。
  • 色を返すには、colorAccessor（）関数を使用する必要があります。
  • 最後に、タイトルを設定し、チャートをレンダリングします。

ステップ6：作業例

完全なコーディングは次のとおりです。 Webページ heatmapl を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC heat map Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "heatmap"></div>
      </div>

      <script language = "javascript">
         var chart = dc.heatMap('#heatmap');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               x.age = Math.floor(x.age) + 1;
               x.heightRange = Math.floor(x.height/10) + 1;
               x.weightRange = Math.floor(x.weight/10) + 1;
               if(x.male == 1) {
                  x.gender = 1;
               } else {
                  x.gender = 2;
               }
            });

            var ageDimension = mycrossfilter.dimension(function(data) {
               return [+data.gender, +data.heightRange];
            });

            var ageGroup = ageDimension.group().reduceCount();
            chart
               .width(20 *45 + 80)
               .height(2* 45 + 40)
               .dimension(ageDimension)
               .group(ageGroup)
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.key[0]; })
               .colorAccessor(function(d) { return +d.value; })
               .title(function(d) {
                  return "Height Range:   " + ((d.key[1] - 1) *10) + " - " +
                  (d.key[1]* 10) + "cm\n" +
                  "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
                  "Count: " + (d.value) + " count";})
               .calculateColorDomain()

            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

DC.js-データ数

データカウントは、データセット内のレコードの総数を表示するために使用されます。 次の2種類のカウントを実行します-

  • 合計カウント-レコードの合計数。
  • Filter-count -現在のフィルターと一致したレコードの数。

データカウント方法

データカウントを使用する前に、 dc.dataCount クラスとそのメソッドを理解する必要があります。 dc.dataCountクラスは、ミックスインを使用して、データカウントを表示する基本機能を取得します。

  • dc.baseMixin

dc.dataCountは、このミックスインのすべてのメソッドを取得し、以下に説明するようにデータ数を表示する独自のメソッドを持っています-

formatNumber（[フォーマッタ]）

このメソッドは、フィルターカウントと合計カウントの形式を取得または設定するために使用されます。

html（[オプション]）

HTMLテンプレートを取得または設定して、選択したアイテムの数を表示するために使用します。

例- 

counterl ({
   all: 'HTML template to use if all items are selected'
})

ここでは、「all」は％total-countを使用してすべてのアイテムを選択するために使用されます。 一部のアイテムのみを使用する場合は、％filter-countオプションを使用して一部のレコードを使用できます。

データ数の例

DCでデータカウントを実行しましょう。 これを行うには、以下の手順に従う必要があります-

ステップ1：スタイルを追加する

以下に示すコーディングを使用してCSSにスタイルを追加しましょう- 

.dc-chart { font-size: 12px; }

ここで、チャートにスタイルを割り当てました。

ステップ2：変数を作成する

以下に示すようにDCで変数を作成しましょう- 

var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");

ここでは、countのidがmystatsであるのに対し、barChart変数idをインラインで割り当てています。

ステップ3：データを読む

以下に示すようにpeople.csvファイルからデータを読み取ります- 

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。

ここでは、以前のチャート作成例で使用されたpeople.csvファイルを使用しています。 以下に示すように見えます- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.........................................
........................................

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます- 

//age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
   return ~~((Date.now() - new Date(data.DOB))/(31557600000))
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して年齢をグループ化します- 

var ageGroup = ageDimension.group().reduceCount();

ステップ5：チャートを生成する

次に、以下に示すコーディングを使用して棒グラフを生成します- 

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ここに、

  • グラフの幅を400に、高さを200に割り当てました。
  • 次に、ドメイン範囲を[15,70]として指定しました。
  • x軸ラベルを年齢として、y軸ラベルをカウントとして設定しました。
  • elasticYおよびX関数をtrueとして指定しました。

ステップ6：カウントチャートを作成してレンダリングする

今、以下のコーディングを使用してカウントチャートを作成してレンダリングします- 

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

barChart.render();
countChart.render();

ここでは、クロスフィルター変数にディメンションを割り当てました。 最後に、年齢に基づいてすべてのレコードをグループ化します。

ステップ7：作業例

完全なコードは次のとおりです。 Webページ datacountl を作成し、以下の変更を加えます。 

<html>
   <head>
      <title>DC datacount sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <style>
         .dc-chart { font-size: 12px; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line');//, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

           //age dimension
            var ageDimension = mycrossfilter.dimension(function(data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000))
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            barChart.render();
            countChart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

データ数の初期ページを以下に示します。

特定の年齢を選択すると、以下のスクリーンショットに示すようにカウントが表示されます。

データ数

DC.js-データテーブル

データテーブルを使用して、レコードを表形式で表示します。 この章で詳しく説明されているように、クロスフィルターデータセットレコードをリストします。

データテーブルメソッド

データテーブルの描画に進む前に、 dc.dataTable クラスとそのメソッドを理解する必要があります。 以下に定義されているデータテーブルチャートを描画する基本機能を取得するために、ミックスインを使用します-

  • dc.baseMixin

dc.dataTableは、このミックスインのすべてのメソッドを取得し、データテーブルを描画する独自のメソッドを持っています。これについては、以下で説明します。

beginSlice（[スライス]）

このメソッドは、開始スライスのインデックスを取得または設定するために使用されます。 このメソッドは、ページネーションを実装するときに役立ちます。

同様に、endSlice（）関数も実行できます。

列（[列]）

このメソッドは、列関数を取得または設定するために使用されます。 次のメソッドを使用して、表示する列を指定します。 

chart.columns([
   function(d) { return d.mark; },
   function(d) { return d.low; },
   function(d) { return d.high; },
   function(d) { return numberFormat(d.high - d.low); },
   function(d) { return d.volume; }
]);

ここで、dはデータセットの行を表します。 HTMLを使用して、データテーブルの列を表示できます。

group（groupFunction）

このメソッドは、データテーブルのグループ機能を実行するために使用されます。

order（[order]）

順序関数のソートに使用されます。 順序が昇順の場合、dimension（）は.bottom（）を使用してデータをフェッチします。それ以外の場合、dimension（）。top（）を使用します。

データテーブルの例

DCでデータテーブルを作成します。 これを行うには、以下の手順に従う必要があります-

ステップ1：スタイルを追加する

以下に示すコーディングを使用してCSSにスタイルを追加しましょう- 

.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }

ここでは、チャート、テーブルグループ、およびグリッド列にスタイルを割り当てています。

ステップ2：変数を作成する

以下に示すようにDCで変数を作成しましょう- 

var barChart = dc.barChart('#line');//
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");

ここでは、barChart変数idをインラインで割り当てています。countChartidはmystatsで、tableChart idはmytableです。

ステップ3：データを読む

以下に示すようにpeople.csvファイルからデータを読み取ります- 

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。 ここでは、以前のチャート作成例で使用されたのと同じpeople.csvファイルを使用しました。

次のようになります- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

..........................................
..........................................

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます- 

var ageDimension = mycrossfilter.dimension(function(data) {
   return ~~((Date.now() - new Date(data.DOB))/(31557600000))
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して年齢をグループ化します- 

var ageGroup = ageDimension.group().reduceCount();

ステップ5：チャートを生成する

次に、以下に示すコーディングを使用して棒グラフを生成します- 

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ここに、

  • グラフの幅を400に、高さを200に割り当てました。
  • 次に、ドメイン範囲を[15,70]として指定しました。
  • x軸ラベルを年齢として、y軸ラベルをカウントとして設定しました。
  • elasticYおよびX関数をtrueとして指定しました。

ステップ6：データテーブルを作成する

今、以下に示すコーディングを使用してデータテーブルを作成します- 

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

tableChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB))/(31557600000));
   })

ここでは、年齢ディメンションを指定し、データをグループ化しました。

ステップ7：テーブルをレンダリングする

今、以下のコーディングを使用してグリッドをレンダリングします- 

.size(Infinity)
   .columns(['name', 'DOB'])
   .sortBy(function (d) {
      return d.value;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
tableChart.render();

ここでは、DOBを使用して列をソートし、レコードをソートしました。

ステップ8：作業例

完全なコードは次のとおりです。 Webページデータテーブルを作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC datatable sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <style>
         .dc-chart { font-size: 12px; }
         .dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
               class = "total-count"></span> | <a href = "javascript:dc.filterAll();
               dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div id = "mytable"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line');//, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var tableChart = dc.dataTable("#mytable");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

           //age dimension
            var ageDimension = mycrossfilter.dimension(function(data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000))
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            tableChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB))/(31557600000));
               })
               .size(Infinity)
               .columns(['name', 'DOB'])
               .sortBy(function (d) {
                  return d.value;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            tableChart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の応答が表示されます。

20と30の間の年齢を選択した後、それは以下のスクリーンショットに示すようにテーブルレコードを表示します-

テーブルレコード

DC.js-データグリッド

データグリッドは、レコードのフィルタリングと表示に使用されます。 この章では、データグリッドについて詳しく説明します。

データグリッドメソッド

データグリッドの描画に進む前に、 dc.dataGrid クラスとそのメソッドを理解する必要があります。 このクラスはミックスインを使用して、データグリッドチャートを描画する基本機能を取得します。

  • dc.baseMixin

dc.dataGridは、このミックスインのすべてのメソッドを取得するだけでなく、以下に説明するデータグリッドを描画する独自のメソッドを持っています-

beginSlice（[スライス]）

このメソッドは、開始スライスのインデックスを取得または設定するために使用されます。 このメソッドは、ページネーションを実装するときに役立ちます。

同様に、endSlice（）を実行できます。

グループ（関数）

このメソッドは、データグリッドのグループ機能を実行するために使用されます。

html（[html]）

このメソッドは、動的htmlを生成する関数を取得または設定するために使用されます。

order（[order]）

順序関数のソートに使用されます。

サイズ（[サイズ]）

グリッド内のアイテムの数を表示するために使用されます。

sortBy（[sortByFunction]）

このメソッドは、ソート関数を取得または設定するために使用されます。 この関数を使用して特定のフィールドをソートできます。 たとえば、次のように定義されている年齢で並べ替えることができます- 

chart.sortBy(function(d) {
   return d.age;
});

データグリッドの例

DCでデータグリッドを実行します。 これを行うには、以下の手順に従う必要があります-

ステップ1：スタイルを追加する

以下のコーディングを使用してCSSにスタイルを追加しましょう- 

.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }

ここで、チャート、グリッドトップ、グリッドアイテムのスタイルを割り当てました。

ステップ2：変数を作成する

以下に説明するようにDCで変数を作成しましょう- 

var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

ここでは、barChart変数idをインラインで割り当てています。countChartidはmystats、gridChart idはmygridです。

ステップ3：データを読む

以下に示すように、 people.csv ファイルからデータを読み取ります- 

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。

ここでは、以前のチャート作成例で使用されたのと同じpeople.csvファイルを使用しました。 以下のように見えます- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

..........................................
.........................................

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます- 

var ageDimension = mycrossfilter.dimension(function(data) {
   return ~~((Date.now() - new Date(data.DOB))/(31557600000))
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して年齢をグループ化します- 

var ageGroup = ageDimension.group().reduceCount();

ステップ5：チャートを生成する

次に、以下に示すコーディングを使用して棒グラフを生成します- 

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ここに、

  • グラフの幅を400に、高さを200に割り当てました。
  • 次に、ドメイン範囲を[15,70]として指定しました。
  • x軸ラベルを年齢として、y軸ラベルをカウントとして設定しました。
  • elasticYおよびX関数をtrueとして指定しました。

ステップ6：グリッドチャートを作成する

今、以下に示すコーディングを使用してグリッドチャートを作成します- 

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB))/(31557600000));
   })

ステップ7：グリッドをレンダリングする

次に、以下に示すコーディングを使用してグリッドをレンダリングします- 

.size(100)
   lGroup (function(d) {
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   l (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
gridChart.render();

ここでは、html（）関数を使用して名前をソートし、最終的にチャートをレンダリングしました。

ステップ8：作業例

完全なコードは次のとおりです。 Webページ datagridl を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC datagrid sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

           //age dimension
            var ageDimension = mycrossfilter.dimension(function(data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000))
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            gridChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB))/(31557600000));
               })
               .size(100)
               lGroup (function(d) {
                  return 'Age: ' + d.key +
                  '; Count: ' + d.values.length +
                  ' people'
               })
               l (function(d) { return d.name; })
               .sortBy(function (d) {
                  return d.name;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            gridChart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

最初、グリッドチャートは次のスクリーンショットのようになります。

63〜66の特定の年齢を選択すると、次のレコードが除外されます。

レコードのフィルター

DC.js-凡例

凡例は、取り付け可能な画面のカスタマイズです。 他のDCチャートに追加して、水平の凡例ラベルをレンダリングできます。 この章では、凡例について詳しく説明します。

凡例メソッド

Legendは、次の重要なメソッドをサポートしています。 それぞれについて詳しく見ていきましょう。

autoItemWidth（[幅]）

このメソッドは、凡例アイテムの自動幅をオンまたはオフに設定するために使用されます。 trueの場合、itemWidthは無視されます。 以下に定義されています- 

legend.autoItemWidth = function (width) {
   if (!arguments.length) {
      return _width;
   }
}

ギャップ（[ギャップ]）

このメソッドは、凡例アイテム間のギャップを設定または取得するために使用されます。 次のように定義されます- 

legend.gap = function (gap) {
   if (!arguments.length) {
      return _gap;
   }
}

水平（[h]）

このメソッドは、凡例を水平に配置するために使用され、次のように定義されます。 

_legend.horizontal = function (h) {
   if (!arguments.length) {
      return _h;
   }
};

itemHeight（[itemHeight]）

このメソッドは、凡例項目の高さを設定または取得するために使用されます。 

legend.itemHeight = function (itemHeight) {
   if (!arguments.length) {
      return _itemHeight;
   }
};

itemWidth（[itemWidth]）

このメソッドは、凡例に水平凡例のアイテム幅を設定または取得するために使用されます。 

_legend.itemWidth = function (itemWidth) {
   if (!arguments.length) {
      return _itemWidth;
   }
};

legendText（[テキスト]）

このメソッドは、凡例テキスト関数を設定または取得するために使用されます。 凡例ウィジェットはこの関数を使用して、各アイテムの凡例テキストをレンダリングします。 関数が指定されていない場合、凡例ウィジェットには各グループに関連付けられた名前が表示されます。 簡単な例を以下に示します- 

legend.legendText(dc.pluck('name'))

maxItems（[アイテム]）

このメソッドは、凡例アイテムの最大数を表示するために使用されます。

x（[x]）

それは、凡例ウィジェットのx座標を設定または取得するために使用され、以下で定義されています- 

legend.x = function (x) {
   if (!arguments.length) {
      return _x;
   }
};

同様に、y座標も実行できます。

DC.js-ダッシュボードの動作例

この章では、グラフをクリックして選択することにより、DCでダッシュボードを開発します。

実施例

これで背景ができたので、コードを書き始めることができます。 次の手順が含まれています-

ステップ1：スタイルを追加する

以下に示すコーディングを使用して、CSSにスタイルを追加しましょう。 

<style>
   .dc-chart { font-size: 12px; }
   .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
   .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>

ここでは、チャート、グリッドトップ、およびグリッドアイテムにスタイルを割り当てています。

ステップ2：変数を作成する

以下に示すように、DCで変数を作成しましょう。 

var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

ここでは、barChart変数idをインラインで割り当てています。countChartidはmystats、pieChartはpie、gridChart idはmygridです。

ステップ3：データを読む

以下に示すように、people.csvファイルからデータを読み取ります。 

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。 ここでは、以前のチャート作成例で使用したものと同じ people.csv ファイルを使用しました。 以下のようになります。 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.........................................
.........................................

ステップ4：年齢のディメンションを設定する

以下のコーディングを使用してディメンションを設定できます。 

var ageDimension = mycrossfilter.dimension(function(data) {
   return ~~((Date.now() - new Date(data.DOB))/(31557600000))
});

ディメンションを割り当てた後、以下に示すコーディングを使用して年齢をグループ化します。 

var ageGroup = ageDimension.group().reduceCount();

ステップ5：性別のディメンションを設定する

以下のコーディングを使用してディメンションを設定できます。 

//gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();

ステップ6：棒グラフを生成する

次に、以下のコーディングを使用して棒グラフを生成します。 

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ここに、

  • グラフの幅を400に、高さを200に割り当てました。
  • 次に、ドメイン範囲を[15、70]として指定しました。
  • x軸ラベルを年齢として、y軸ラベルをカウントとして設定しました。
  • elasticYおよびX関数をtrueとして指定しました。

ステップ7：円グラフを生成する

次に、以下のコーディングを使用して円グラフを生成します。 

pieChart
   .width(200)
   .height(100)
   .dimension(genderDimension)
   .group(genderGroup);

ここに、

  • グラフの幅を200に、高さを100に割り当てました。
  • 次に、性別でディメンションをグループ化します。

ステップ8：グリッドとカウントチャートを作成する

次に、グリッドを作成し、以下に示すコーディングを使用してチャートをカウントします。 

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB))/(31557600000));
   })

ステップ9：グリッドをレンダリングしてカウントする

次に、グリッドをレンダリングし、以下のコーディングを使用してカウントします。 

.size(100)
   lGroup (function(d) {
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   l (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
pieChart.render();
countChart.render();
gridChart.render();

ここでは、html（）関数を使用して名前をソートし、最終的にチャートをレンダリングしました。

ステップ10：作業例

完全なコードは次のとおりです。 Webページ dashboardl を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC dashboard sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
               <div id = "pie"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line');//, 'myChartGroup');
         var pieChart = dc.pieChart('#pie');//, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

           //age dimension
            var ageDimension = mycrossfilter.dimension(function(data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000))
            });
            var ageGroup = ageDimension.group().reduceCount();

           //gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) {
               return data.gender;
            });
            var genderGroup = genderDimension.group().reduceCount();

         barChart
            .width(400)
            .height(200)
            .x(d3.scale.linear().domain([15,70]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .elasticY(true)
            .elasticX(true)
            .dimension(ageDimension)
            .group(ageGroup);

         pieChart
            .width(200)
            .height(100)
            .dimension(genderDimension)
            .group(genderGroup);

         countChart
            .dimension(mycrossfilter)
            .group(mycrossfilter.groupAll());

         gridChart
            .dimension(ageDimension)
            .group(function (data) {
               return ~~((Date.now() - new Date(data.DOB))/(31557600000));
            })
            .size(100)
            lGroup (function(d) {
               return 'Age: ' + d.key +
               '; Count: ' + d.values.length +
               ' people'
            })
            l (function(d) { return d.name; })
            .sortBy(function (d) {
               return d.name;
            })
            .order(d3.ascending);

         barChart.render();
         pieChart.render();
         countChart.render();
         gridChart.render();
      });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

バー、円グラフをクリックして自分自身を確認し、データがどのように変化するかを確認できます。

「https://www.finddevguides.com/index.php?title=Dcjs-quick-guide&oldid=78840」から取得
Powered by MediaWiki