D3.js-ズームAPI

ズームは、コンテンツのスケーリングに役立ちます。クリックアンドドラッグアプローチを使用して、特定の領域に焦点を合わせることができます。この章では、ZoomingAPIについて詳しく説明します。

APIの構成

次のスクリプトを使用して、「d3js.org」から直接ZoomingAPIをロードできます。

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

ズームAPIメソッド

以下は、最も一般的に使用されるZoomingAPIメソッドの一部です。

d3.zoom()
zoom(selection)
zoom.transform（selection、transform）
zoom.translateBy（selection、x、y）
zoom.translateTo（selection、x、y）
zoom.scaleTo（selection、k）
zoom.scaleBy（selection、k）
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on（typenames [、listener]）

これらすべてのZoomingAPIメソッドについて簡単に説明します。

d3.zoom（）

新しいズーム動作を作成します。以下のスクリプトを使用してアクセスできます。

<script>
   var zoom = d3.zoom();
</script>

ズーム（選択）

選択した要素にズーム変換を適用するために使用されます。たとえば、次の構文を使用して、mousedown.zoomの動作をインスタンス化できます。

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform（selection、transform）

選択した要素の現在のズーム変換を指定した変換に設定するために使用されます。たとえば、次の構文を使用して、ズーム変換をID変換にリセットできます。

selection.call(zoom.transform, d3.zoomIdentity);

次の構文を使用して、ズーム変換を1000ミリ秒の間ID変換にリセットすることもできます。

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy（selection、x、y）

これは、選択した要素の現在のズーム変換をx値とy値で変換するために使用されます。xとyの変換値は、数値または数値を返す関数として指定できます。選択した要素に対して関数が呼び出されると、その関数はDOMの現在のデータム「d」とインデックス「i」を通過します。サンプルコードを以下に定義します。

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo（selection、x、y）

これは、選択した要素の現在のズーム変換をxとyの指定した位置に変換するために使用されます。

zoom.scaleTo（selection、k）

選択した要素の現在のズーム変換をにスケーリングするために使用されます k。ここに、k は、数値または関数として指定されるスケール係数です。

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy（selection、k）

これは、選択した要素の現在のズーム変換を次のようにスケーリングするために使用されます。 k。ここに、k はスケール係数であり、数値または数値を返す関数として指定されます。

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter（[filter]）

ズーム動作のために指定された機能にフィルターを設定するために使用されます。フィルタが指定されていない場合、次のように現在のフィルタが返されます。

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta（δ）

の値 Δホイールデルタ関数によって返されます。デルタが指定されていない場合は、現在のホイールデルタ関数を返します。

zoom.extent（[extent]）

指定された配列ポイントにエクステントを設定するために使用されます。エクステントが指定されていない場合は、現在のエクステントアクセサーが返されます。デフォルトは[[0、0]、[width、height]]です。ここで、widthは要素のクライアント幅、heightはクライアントの高さです。

zoom.scaleExtent（[extent]）

これは、スケール範囲を指定された数値の配列[k0、k1]に設定するために使用されます。ここに、k0最小許容スケール係数です。一方、k1は最大許容倍率です。エクステントが指定されていない場合は、現在のスケールエクステントが返されます。デフォルトは[0、∞]です。以下に定義されているサンプルコードについて考えてみます。

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

スケール範囲の対応する制限にすでに達している場合、ユーザーはホイールでズームを試みることができます。スケール範囲に関係なくホイール入力でのスクロールを防ぎたい場合は、ホイールイベントリスナーを登録して、ブラウザのデフォルトの動作を防ぎます。

zoom.translateExtent（[extent]）

エクステントが指定されている場合は、変換エクステントを指定されたポイントの配列に設定します。エクステントが指定されていない場合は、現在の変換エクステントが返されます。デフォルトは[[-∞、-∞]、[+∞、+∞]]です。

zoom.clickDistance（[distance]）

このメソッドは、ズーム可能な領域が上下に移動できる最大距離を設定するために使用されます。これにより、後続のクリックイベントがトリガーされます。

zoom.duration（[duration]）

このメソッドは、ダブルクリックおよびダブルタップ時のズーム遷移の期間を指定されたミリ秒数に設定し、ズーム動作を返すために使用されます。期間が指定されていない場合は、現在の期間が返されます。デフォルトは250ミリ秒で、以下に定義されています。

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate（[interpolate]）

このメソッドは、指定された関数へのズーム遷移を補間するために使用されます。interpolateが指定されていない場合、現在の補間ファクトリが返されます。デフォルトはd3.interpolateZoomです。

zoom.on（typenames [、listener]）

リスナーが指定されている場合は、指定されたタイプ名のイベントリスナーを設定し、ズーム動作を返します。typenamesは、空白で区切られた1つ以上のtypenameを含む文字列です。各typenameはタイプであり、オプションでピリオド（。）と名前（zoom.oneやzoom.secondなど）が続きます。この名前により、同じタイプに複数のリスナーを登録できます。このタイプは、次のいずれかからのものである必要があります-

Start −ズーム開始後（マウスダウンなど）。
Zoom −ズーム変換への変更後（mousemoveなど）。
End −ズームが終了した後（マウスアップなど）。

次の章では、D3.jsのさまざまなリクエストAPIについて説明します。