d3を使用したブラシブルでズーム可能なタイムライン

Question

タイムラインを作成して、ズームするためにスクロールするか、ズームする領域を選択するかを選択できます。 最初のようないくつかの例があります。 https://bl.ocks.org/mbostock/4015254 やブラシ付きの領域をズーム： https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
しかし、私は両方を行う例を見つけることができません。私はどのようにすればいいのですか？または、私が逃した例はありますか？

Answer 1

これは実装するのが最も簡単なことではありません。気づくように、ブラシベースのズームはd3.zoomに依存しませんが、イベントを発生させるリスナーを介してズームを実行し、軸を拡大/縮小し、それに応じてプロット要素を移動するのに必要な処理を行います。

は対照的に、全てのスクロールベースのズーム例は、典型的には、ズームや各種グラフ要素を更新する責任を負い/パンニングしながらプロット上で実行されたすべての変換を追跡d3.zoom()挙動を利用d3.zoomに依存しています。難しいのは、2つのアプローチが全く異なるということです。ブラシでチャートビューを手動で変更する場合は、d3.zoomが参照する内部ズームトランスフォームを更新する方法を見つけ出す必要があります。ブラシベースのズームイベント。

d3.zoomは、他の場所から情報を入力するようには設計されておらず、実行された変換の内部記録は更新可能/変更可能ではないためです。 selection.call(zoom.transform, d3.zoomIdentity);で変換を更新することはできますが、残念ながら、実際のズーム動作に関連する一連のイベントも発生します。これは、ブラシベースのズームですべてのズーム動作を既に処理しているためです。例えばので

// WARNING: Ugly mutation of __zoom property of pan/scroll-zoom rect to 
// reset the transform without having to fire events associated with zoom 
// d3.select(".zoom").node().__zoom = {k: 1, x: 0, y: 0}; <-- Fails since __zoom contains other hidden objects 
scrollZoom.node().__zoom["k"] = 1; 
scrollZoom.node().__zoom["x"] = 0; 
scrollZoom.node().__zoom["y"] = 0; 

：次のように私は、ズーム変換をリセットするために使用することができた醜いが、効果的な回避策はd3.zoom行動にバインドされているDOMノードの実際の.__zoomフィールドを変異させるだった場合矩形ズームの場合は2Dブラシが必要ですが、パンとマウススクロールの場合はd3.zoomベースのズームが必要です。このとき、2Dブラシを使用してズームすると、d3.zoom変換を上記のように元の変換に戻す必要があります。これは、ディスプレイ上のビューと同期していないd3.zoomのレコードの変換によるパン/マウススクロールアクションによる2Dブラシベースのズーム操作を連鎖させるときに、パン/スクロールレスポンスのジッタを防止し、醜いものにします（2Dブラシd3.zoomの知識なしにビューを変更する）。ここで

は注意することが重要である何か他のものである：

d3.zoomは、現在唯一のXとY軸（Source）の両方に共通のズーム倍率をサポートすることを制限するであります。これは残念なことに、2Dブラシベースのズームをd3.zoomベースのアプローチにマップする方法がないことを意味します。これは、2DブラシベースのズームではXとYのズームスケーリングが異なるためです。最小限の問題でも、一貫したアプローチ、私はd3.xyzoomを使用して探してお勧めしたいと思います。これはd3.zoomのフォークで、X軸とY軸のさまざまなスケールをサポートしています。これにより、任意の2Dブラシ選択に対応するXおよびYズームのスケーリングおよび変換値を計算して、d3.zoomに入力することができます。これにより、一般的なアプローチを使用してすべてのズームを実行することができますコードの複製）。

つまり、1次元ブラシベースのズームに興味があれば、それをd3にマップすることができます。ズームアプローチを使用して、チャート内のすべての軸やその他のグラフィック要素のビューとスケーリングを処理する2つの異なるパスを処理する必要がありません。ここではこの良い例です：

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

私はこのポストの長さのために、それは少しまとまりであれば謝罪。私は数日で私の仕事にブロックをまとめるために取り組んでいます。私はここに回り込んで、そうすることに慣れたらリンクを張ります。私は一週間前にD3を学び始めたので、途中で学習しています。