d3.js
d3のために堅牢で、応答性が高く、再利用可能にする（r3）

前書き

散布図

この例には合計で1000行以上のコードが含まれています（ここに埋め込むには多すぎます）。そのため、すべてのコードはhttp://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2（https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2でホストされています）からアクセスできます。 bl.ocks.orgはiframeを使用していますので、ボタンをクリックする（iframeの右下隅）をクリックする必要があるサイズ変更を確認してください。多くのコードがあるので、それは複数のファイルに分割されており、関連するコードセグメントはファイル名と行番号の両方で参照されます。この例題を開いてください。

チャートを作るのは何ですか？

任意の完全なチャートに入るいくつかのコアコンポーネントがあります。すなわち、

• タイトル
• 軸
• 軸ラベル
• データ

チャートによっては、チャートの凡例など、他の側面も含まれます。しかし、これらの要素の多くはツールチップで回避することができます。そのため、インタラクティブなチャート固有の要素があります。たとえば、データを切り替えるボタンです。

私たちのチャートのコンテンツはインタラクティブなので、チャート自体が動的であることが適切です。例えば、ウィンドウのサイズが変更されたときにサイズを変更します。 SVGはスケーラブルであるため、現在のパースペクティブを維持しながらチャートを拡大/縮小することができます。ただし、設定されたパースペクティブによっては、グラフが十分なスペースがあっても（たとえば、幅が高さよりも大きい場合など）、グラフが小さすぎて読み込めないことがあります。したがって、グラフを残りのサイズで再描画することが望ましい場合があります。

この例では、ボタン、タイトル、軸、軸ラベルの配置を動的に計算する方法と、異なるデータ量のデータセットを処理する方法について説明します

セットアップ

構成

コードの再利用を目指しているので、チャートのさまざまな面でグローバルオプションを含む設定ファイルを作成する必要があります。このような設定ファイルの例は、 charts_configuration.jsonです。

このファイルを見ると、グラフを作成するときにすでに明確に使用していたはずの要素がいくつか含まれています。

• ファイル（私たちのチャートデータが格納されている場所の文字列を格納します）
• document_state（このボタンは現在私たちのチャートで選択されています）
• chart_ids（作成するチャートのHTML ID）
• svg（svgのオプション、例えばサイズ）
• plot_attributes
  • title（さまざまなフォント属性を設定）
  • ツールチップ（さまざまなツールチップスタイルのプロパティを設定）
  • axes（さまざまなフォント属性を設定）
  • ボタン（さまざまなフォントとスタイル属性を設定）
• プロット
  • scatter（散布図のさまざまな側面を設定します（例：点半径）
• 色（使用する特定のカラーパレット）

ヘルパー関数

これらのグローバルな側面を設定することに加えて、いくつかのヘルパー関数を定義する必要があります。これらはhelpers.js下にありhelpers.js

• ajax_json （jsonファイルを同期または非同期でロード）
• keys （指定されたオブジェクトのキーを返す - d3.keys（）に相当）
• parseNumber （型または番号がわからない場合の一般的な数値解析）
• typeofNumber （数値型を返す）

index.html

最後に、htmlファイルを設定する必要があります。この例の目的のために、私たちのチャートをsectionタグに入れます。ここで、 idは設定ファイルで与えられたid一致します（37行目）。パーセンテージは、親メンバーから計算できる場合にのみ機能するため、基本的なスタイリング（19〜35行目）

散布図を作る

make_scatter_chart.js開きましょう。ここでは、最も重要な変数の多くがあらかじめ定義されている2行目に注意を払いましょう。

• svg - d3チャートのsvgの選択
• chart_group - d3データが配置されるsvg内のグループの選択
• キャンバス - 利便性のためのSVG抽出のコア側面
• マージン - 考慮する必要があるマージン
• maxi_draw_spaceデータを描画できる最大のxとyの値
• doc_state - ボタンを使用している場合のドキュメントの現在の状態（この例では現在）

あなたは私たちがhtmlにsvgを含めなかったことに気づいたかもしれません。したがって、グラフで何かできるようになる前に、まだ存在しない場合は、 index.html svgを追加する必要があります。これは、ファイルに達成されるmake_svg.js機能によってmake_chart_svg 。 make_svg.jsを見ると、svgの幅と高さのチャート設定でヘルパー関数parseNumberを使用していることがわかります。数値が浮動小数点数の場合、svgの幅と高さはセクションの幅と高さに比例します。数値が整数の場合は、それらの整数に設定されます。

6行目〜11行目は、これが最初の呼び出しであるかどうかを確認するためのテストで、 chart_group （および最初の呼び出しであればドキュメントの状態）を設定します。

14行目〜15行目は、クリックされたボタンで現在選択されているデータを抽出します。 16行目はdata_extent設定しdata_extent 。 d3にはデータ範囲を抽出する機能がありますが、この変数にデータ範囲を格納するのが私の好みです。

27行目から38行目にはマージン、ボタン、タイトル、および軸を作成してグラフを設定する魔法が含まれています。これらはすべて動的に決定され、少し複雑に見えるかもしれませんので、順番に見ていきます。

make_margins（make_margins.js内）

マージンオブジェクトは、チャートの左、右、上、下のスペース（それぞれx.left、x.right、y.top、y.bottom）、タイトル、ボタン、および軸。

軸のマージンは21行目で更新されています。

なぜ我々はこれを行うのですか？私たちがティック数を指定しない限り、ティックはティック・サイズを指定し、ティック・ラベル・フォント・サイズは、軸が必要とするサイズを計算できませんでした。それでも、私たちはまだ目盛りラベルとダニの間のスペースを推測しなければなりません。したがって、データを使用していくつかのダミー軸を作成し、対応するsvg要素の大きさを確認してサイズを返す方が簡単です。

実際には、y軸の幅とx軸の高さだけが必要です。これはaxes.yとaxes.xに格納されているものです。

デフォルトのマージンを設定して、 max_drawing_space計算しmax_drawing_space （make_margins.jsの29〜34行目）

make_buttons（make_buttons.js内）

この関数は、すべてのボタンのグループを作成し、各ボタンのグループを作成し、各ボタンは円とテキスト要素を格納します。 37行目から85行目でボタンの位置が計算されます。これは、各ボタンの長さのテキストの右端が、私たちが描画できるスペースよりも長いかどうかを調べることで行います（75行目）。その場合は、ボタンを1行下に置き、マージンを更新します。

make_title（make_title.js内）

make_titleは、チャートのタイトルを自動的に複数の行に分割し、必要に応じてハイフネーションを行うという点で、 make_titleと似ています。 TeXのハイフネーションスキームが洗練されていないので少しハッキリですが、十分にうまくいきます。 1つ以上の行が必要な場合は、余白が更新されます。

ボタン、タイトル、およびマージンが設定されていると、軸を作ることができます。

make_axes（make_axes.js内）

make_axesのロジックは、ダミー軸に必要なスペースを計算するためのものです。ただし、ここでは軸間の遷移に遷移を追加します。

最後に、散布図

すべての設定が完了したら、最終的に散布図を作成することができます。データセットのポイント数が異なる可能性があるため、これを考慮してd3の入力イベントと終了イベントを適切に活用する必要があります。既に存在する点の数を40行目で取得します。45行目のif文は、データが多い場合はcircle要素を追加し、余分な要素はコーナーに移動し、余分な要素がある場合は削除します。

正しい数の要素があることがわかったら、残りの要素をすべて正しい位置に移すことができます（64行目）

最後に、67行目と68行目にツールチップを追加します。ツールチップ関数はmake_tooltip.js

ボックス・ウィスカー・チャート

前の例（make_title、make_axes、make_buttonsなど）のような一般化された関数の値を表示するには、このボックスとひげチャートを考えてみましょう： https ://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

ボックスやウィスカーを作成するコードは、ポイントを置くだけでなく、同じ機能が完璧に機能することがわかります。

棒グラフ

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248