D3 TESTING (´・_・`) | ◀ Back to Prev
(@sw)Dispatching Events
この例では、共有された状態との意見を調整するd3.dispatchを使用する方法を示します。人口の年齢層によって特定の状態のために:ここでは、棒グラフや円グラフ、同じデータの2つのビューが表示されます。 (簡潔にするため、凡例は省略されます)この例では、2つのカスタムイベントを使用していますデータが利用可能でloadイベント、表示された状態が変更されたのStateChangeイベントを。

カスタムイベントは緩いのコンポーネントの結合を可能:ビューには、明示的に一緒に、各ビューを結ぶために必要とせずに、イベントを待機し、それに応じてDOMを更新することができます。ときにドロップダウンメニューの変更、のStateChangeイベントはどれが利害リスナーに通知されますトリガされます。

各ビューには、複数のリスナーを単一のイベントのために通知することができるように、そのような "バー"や "パイ"と、一意の名前を使用しています。 (D3、リスナーは、それが登録されたリスナーを削除したり、検査する方が簡単ですので、むしろ匿名ではなく、名前が付けられている必要があります。)したがって、"load.menu"を、"load.bar"と "load.pie"リスナーときにすべて通知されデータがロードされます。

◀ Tree Map Version

▶ Partition Version

◀ HEAT MAP Version

(@sw)DRY draft Bar Chart ▶ Backbone Dry Bar Chart->
少しDRYの使用例の棒グラフの変化スタイル。視覚化は、2つの機能とその組成で表されます。
値アクセサは指定されたデータオブジェクトをコードする値(またはプロパティ)を返します。
スケールは、このような画素位置として、視覚的な表示エンコーディングにこの値をマッピングします。
map関数は、表示するデータからマッピング、合成値○スケールを表しています。

(@sw)Programmatic Pan+Zoom (d3.scale.linear())
パンまたはマウスでズームした後、デフォルトのビューポートに戻って移行する右上の"リセット"ボタンをクリックしてください。

この例では、プログラムでのズーム動作に付着スケールのドメインを設定することを示しています。ドメインが設定されたら、行動にそれらを再バインドする必要があります。

(@sw)Zoom + Pan with Log Axes(d3.scale.log()) ▶ jQuery Other Way View ->

この動作は自動的にズームやコンテナ要素にジェスチャーをパンを処理するイベントリスナーを作成します。両方のマウスとタッチイベントがサポートされています。

#d3.behavior.zoom()

新しいズームの動作を構築します。

#zoom.x([X])

そのドメインズーミング時に自動的に調整されるべきである、X-スケールを指定します。指定しない場合、デフォルトはnullに現在のxスケールを返します。スケールのドメインまたは範囲がプログラム変更された場合、この関数が再び呼び出さなければならない。

#zoom.y([Y])

そのドメインズーミング時に自動的に調整されるべきであるyスケールを指定します。指定しない場合、デフォルトはnull現在のyスケールは、返します。スケールのドメインまたは範囲がプログラム変更された場合、この関数が再び呼び出さなければならない。

#zoom.scaleExtent([範囲])

2要素の配列としてズーム倍率の許容範囲を指定し、[*最小*、最大値]。指定しない場合、現在のスケールの範囲、デフォルトは[0、無限]を返す

#zoom.scale(【スケール】)

現在のズーム倍率を指定します。指定しない場合、デフォルトは1に、現在のズーム倍率を返します。

#zoom.translate([変換])

現在のズーム並進ベクトルを指定します。指定しない場合、デフォルトは[0、0]〜現在の並進ベクトルは、返します。

#zoom.on(タイプ、リスナー)

ズーム動作から指定した型のイベントを受け取るために、指定されたリスナーを登録します。現在のところ、唯一の "ズーム"イベントはサポートされています。発射すると、d3.eventオブジェクトには、次のプロパティが含まれます。

"scale":番号、現在のスケール。
"translate":現在の並進ベクトルを表す2つの要素の配列を。

(@sw)Drag + Zoom + TSVdata + Event Capturing Listeners(Right Click...)

ドラッグ動作はパンよりも優先できるようにするのstopPropagation使用、d3.behavior.dragとd3.behavior.zoomを組み合わせる方法の例。背景をクリックして、パン、または個々のドットをクリックしてドラッグするマウスを使用して、あなたはまた、ズームマウスホイールを使用することができます。

注:これらの2つの動作を組み合わせることジェスチャーの解釈があいまいとの位置に非常に敏感であることを意味します。クリック1画素を離れて背景をパンと解釈できるのに対し、円上のクリックは、その円をドラッグすると解釈されます。これらの動作を組み合わせて、より堅牢な方法は、モダリティを使用することである。ユーザーはSPACEキーを押し保持している場合たとえば、クリックしてドラッグに関係なく、クリック位置の、パンではなく、ドラッグとして解釈されます。このアプローチは、一般に、Adobe Photoshopなどの市販のソフトウェアで使用される。


キャプチャリスナー(selection.onにtrueを渡す)を使用することによって、あなたは彼らがそのようなズーム動作など非キャプチャリスナーによって受信される前にユーザー入力イベントを処理することができます。これは、特定のイベントをインターセプトし、選択的にそれらを処理できることを意味します。

ここでキャプチャマウスダウンリスナーは右クリックを(任意の非左クリック)を検出し、トリガと同様に、コンテキストメニューを無効にするから、ズーム動作を防ぎます。その代わりに、背景が赤点滅します。

コンテキストメニューを無効にすると、一般的にアンチパターンとみなされることに注意してくださいますので、注意して、この機能を使用してください。

(@sw)Zoom + Pan geo.tile
256x256のタイルがスケールに基づいており、変換ビューポートに表示されているかを決定d3.geo.tileプラグインのデモ。

このデモは、AAシンプル滑りやすいマップで、その結果、パンやズーム用d3.behavior.zoomとタイルプラグインを組み合わせています。

(@sw)Zoom + Pan Bitmaps( with polymaps.js )
borderMain1
borderDotted1
▶ N_E_X_T D3 TESTING (´・_・`)