メインコンテンツに移動
- データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い
- d3-time-formatモジュールが日付フォーマット変換に関する様々な機能を提供しています
- 時系列の軸がスケール（d3.scaleTime）に日付フォーマットの使用
- d3.jsのチャート（例：バーチャート、折れ線チャートなど）の軸を作成
- ｄ３.ｓｃａｌｅのドメイン（Ｉｎｐｕｔ）とレンジ（Ｏｕｔｐｕｔ）を利用して軸のサイズ、目盛を決めます
- 使用できないd3.scaleのタイプ（d3.scaleLinear, d3.scaleOriental）があります
- d3.axisの目盛間隔メソッド（ticks）の機能しない場合があります
- d3.axisのtickValuesメソッドでメモリ間隔調整を確実に
- d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie
- d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate
- d3.interpolate関数が二つの値変換機能の理解
- d3.jsがデータより新規描画エレメント作成
- d3.data()が複数のエレメント作成に対して、d3.datum()は単一のエレメントしか作成しません
- d3.data()が作成された複数のエレメントに単一のデータ値をバインディング、d3.datum()が作成した単一のエレメントに全データをバインディング
- d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要
- パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換
- パイチャート作成２：d3.arcを利用してパイチャートを描画
- パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定
- 目的：簡単な例でd3.jsフォース（force）を利用します
- Step1：初期状態として複数の円をsvgで描画します
- Step2：force利用の第一歩：d3.forceSimulation作成
- Step3：d3.forceSimulationのメソッド（force）で円の移動先を指定
- Step4：d3.forceCollideで円の描画範囲を広げる
- バブルチャート（bubble chart）にルート付きの構造化されたデータが必要
- d3.packで一定範囲（width/height）内で円を描画（r,cx,cy）できるデータの作成
- ルート付き/ルートなしでのバブルチャートを描画します
- バブルに色を付けて描画します
- IEがSVGの垂直方向位置調整プロパティ（dominant-baseline）を非対応
- dominant-baselineの設定が違う言語の文字に基準点が違います
- dominant-baselineの値：middle, centralの基準点説明が曖昧です
- SVGで描画した円にテキストを表示します
- 水平方向の位置調整：text-anchor、垂直方向の位置調整：dominant-baseline
- 垂直方向位置調整：alignment-baseline はブラウザChromeだけ有効
- 表示データを定義します（例：配列）
- 表示データ分のHTMLエレメントが作成され、データをエレメントに埋め込まれる
- 新規作成されたエレメントに埋め込まれたデータの確認
