メインコンテンツに移動
- 目的：簡単な例で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エレメントが作成され、データをエレメントに埋め込まれる
- 新規作成されたエレメントに埋め込まれたデータの確認
- 特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します
- d3.scaleOrdinalで特定データの色表現
- d3.scaleLinearで不特定データの色表現
- やりたいこと：Heatmapチャートにある軸のラインと目盛を非表示にしたいです
- 解決１：cssで軸のライン（path）と目盛（line）を非表示
- 解決２：d3のセレクトで軸のライン/目盛を消去（remove）します
- 軸の外側にある目盛文字をチャートと距離調整（tickSizeInner）
- 凡例（legend）が横方向/縦方向があります
- 縦方向の凡例作成は比較的に簡単
- 横方向凡例は各凡例説明文のwidth取得（svgのgetBBox）が必要
- 共通点：コールバック関数＋関数内部ループで処理を行います
- 配列の反復処理関数（forEach,map,reduce,some,everyなど）の目的の違い
- for文でこれらの処理実現ができます
- 違い：処理過程と出力
- for文処理と比べて、配列の反復処理関数の方がパフォーマンス劣化の恐れ
- SVGのプロパティ：viewBoxが設定されたビューの伸縮/切り取り
- viewBox(x,y,width,height)のx/yは投影画像のずれ
- viewBox(x,y,width,height)のwidth/heightは投影画像の伸縮
- 投影された画像をSVG設定の領域の広さにに合わせて（伸縮）に表示させます
