メインコンテンツに移動
- d3.forceLinkがオブジェクト要素間のバネの伸縮効果の再現
- 作成要点１：オブジェクト要素のリンク元（source）ターゲット先（target）設定
- 作成要点２：d3.forceSimulationでd3.forceLinkを定義
- 作成要点３：d3.tickイベントのリスナーでリンクの描画要素（line）の始点/終了設定
- d3.dragモジュールがオブジェクトのドラッグ、オブジェクト移動、ドロップを管理しています
- d3.jsのイベント（start, drag, end）のキャッチと処理ロジックを作成すればドラッグ管理ができます
- d3のフォースレイアウト（fouce layout）で各要素を円形状態に配置するのはよく紹介されている
- d3.fouceX関数を利用して、簡単に各要素を一直線に配置させます
- d3.forceCollide()/d3.forceManyBody()/d3.forceCenter()で動画効果の演出
- d3.jsのSVGの折れ線チャートを作成
- ポイント１：d3.line()でデータセットをSVGのpathプロパティ（d）への変換
- ポイント２：SVGのpathにデータバインディング時にdeta()メソッドではなくdatum()を使用します
- ポイント３：x軸（日付）作成するにはd3.scaleTimeを使用
- 通常のチャート作成方法で折れ線チャートを作成
- データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い
- 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で円の描画範囲を広げる
