D3.js-ズームAPI

ズームは、コンテンツのスケーリングに役立ちます。クリックアンドドラッグアプローチを使用して、特定の地域に集中できます。この章では、Zooming APIについて詳しく説明します。

APIの構成

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

<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メソッド

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

d3.zoom（）
ズーム（選択）
zoom.transform（選択、変換）
zoom.translateBy（selection、x、y）
zoom.translateTo（selection、x、y）
zoom.scaleTo（選択、k）
zoom.scaleBy（選択、k）
zoom.filter（[フィルター]）
zoom.wheelDelta（[delta]）
zoom.extent（[extent]）
zoom.scaleExtent（[extent]）
zoom.translateExtent（[extent]）
zoom.clickDistance（[距離]）
zoom.duration（[duration]）
zoom.interpolate（[補間]）
zoom.on（typenames [、listener]）

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

d3.zoom（）

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

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

ズーム（選択）

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

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

zoom.transform（選択、変換）

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

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

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

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

zoom.translateBy（selection、x、y）

選択した要素の現在のズーム変換をx値とy値で変換するために使用されます。 xおよびyの変換値は、数値または数値を返す関数として指定できます。選択した要素に対して関数が呼び出されると、現在のデータム「d」とDOMのインデックス「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（選択、k）

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

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

zoom.scaleBy（選択、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（[フィルター]）

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

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

zoom.wheelDelta（[delta]）

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

zoom.extent（[extent]）

指定された配列ポイントに範囲を設定するために使用されます。エクステントが指定されていない場合、現在のエクステントアクセサを返します。デフォルトは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が指定されていない場合、現在の補間ファクトリを返します。デフォルトはd3.interpolateZoomです。

zoom.on（typenames [、listener]）

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

開始-ズームの開始後（マウスダウン時など）。
Zoom -ズーム変換の変更後（mousemoveなど）。
終了-ズームが終了した後（mouseupなど）。

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

D3js-zooming-api

目次