メインコンテンツに移動
- d3.dragモジュールがオブジェクトのドラッグ、オブジェクト移動、ドロップを管理しています
- d3.jsのイベント(start, drag, end)のキャッチと処理ロジックを作成すればドラッグ管理ができます
- d3のフォースレイアウト(fouce layout)で各要素を円形状態に配置するのはよく紹介されている
- d3.fouceX関数を利用して、簡単に各要素を一直線に配置させます
- d3.forceCollide()/d3.forceManyBody()/d3.forceCenter()で動画効果の演出
- d3.jsのSVGの折れ線チャートを作成
- ポイント1:d3.line()でデータセットをSVGのpathプロパティ(d)への変換
- ポイント2:SVGのpathにデータバインディング時にdeta()メソッドではなくdatum()を使用します
- ポイント3:x軸(日付)作成するにはd3.scaleTimeを使用
- 通常のチャート作成方法で折れ線チャートを作成
- データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い
- d3-time-formatモジュールが日付フォーマット変換に関する様々な機能を提供しています
- 時系列の軸がスケール(d3.scaleTime)に日付フォーマットの使用
- d3.jsのチャート(例:バーチャート、折れ線チャートなど)の軸を作成
- d3.scaleのドメイン(Input)とレンジ(Output)を利用して軸のサイズ、目盛を決めます
- 使用できない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が必要
- パイチャート作成1:d3.pieで描画データをパイチャートデータへの変換
- パイチャート作成2:d3.arcを利用してパイチャートを描画
- パイチャート作成3: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)できるデータの作成
- ルート付き/ルートなしでのバブルチャートを描画します
- バブルに色を付けて描画します