D3.js - 縮放 API

Created: November-04, 2018

縮放有助於擴充套件你的內容。你可以使用單擊並拖動方法專注於特定區域。在本章中，我們將詳細討論 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(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([extend])
zoom.scaleExtent([extend])
zoom.translateExtent([extend])
zoom.clickDistance([distance])
zoom.duration([time])
zoom.interpolate([interpolate])
zoom.on(typenames[, listener])

讓我們簡要介紹所有這些 Zooming API 方法。

`d3.zoom()`

它會建立一個新的縮放行為。我們可以使用下面的指令碼訪問它。

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

`zoom(selection)`

它用於對選定元素應用縮放 transform。例如，你可以使用以下語法例項化 mousedown.zoom 行為。

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

zoom.transform(selection，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 轉換值指定為數字或返回數字的函式。如果為所選元素呼叫了一個函式，那麼它將通過 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 縮放所選元素的當前 zoon 變換。這裡，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(delta)

Δ 值由輪三角函式返回。如果未指定 delta，則返回當前車輪增量功能。

zoom.extent([extend])

它用於將範圍設定為指定的陣列點。如果未指定範圍，則返回當前範圍訪問器，預設為[[0,0]，[width，height]]，其中 width 是元素的客戶端寬度，height 是其客戶端高度。

zoom.scaleExtent([extend])

它用於將比例範圍設定為指定的數字陣列[k0，k1]。這裡，k0 是允許的最小比例因子。而 k1 是允許的最大比例因子。如果未指定 extent，則返回當前縮放範圍，預設為[0，∞]。考慮下面定義的示例程式碼。

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

當已經處於比例範圍的相應極限時，使用者可以嘗試通過轉動進行縮放。如果我們想要阻止滾輪輸入而不管刻度範圍，請註冊滾輪事件偵聽器以防止瀏覽器預設行為。

zoom.translateExtent([extend])

如果指定了範圍，則將 translate 範圍設定為指定的點陣列。如果未指定 extent，則返回當前平移範圍，預設為[[-∞，-∞]，[+∞，+∞]]。

zoom.clickDistance([distance])

此方法用於設定可縮放區域在向上和向下之間移動的最大距離，這將觸發後續單擊事件。

zoom.duration([time])

此方法用於在雙擊時設定縮放過渡的持續時間，並雙擊到指定的毫秒數並返回縮放行為。如果未指定持續時間，則返回當前持續時間，預設為 250 毫秒，具體定義如下。

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

zoom.interpolate（[interpolate]）

此方法用於內插縮放過渡到指定的函式。如果未指定 interpolate，則返回當前插值工廠，預設為 d3.interpolateZoom。

`zoom.on(typenames[, listener])`

如果指定了偵聽器，它將為指定的型別名設定事件偵聽器並返回縮放行為。型別名是一個包含一個或多個由空格分隔的型別名的字串。每個 typename 都是一個型別，可選地後跟句點（。）和名稱，例如 zoom.one 和 zoom.second。該名稱允許為同一型別註冊多個偵聽器。此型別必須來自以下之一 -

開始 - 縮放開始後（例如在 mousedown 上）。
縮放 - 更改縮放變換後（例如在 mousemove 上）。
結束 - 縮放結束後（例如滑鼠上）。

在下一章中，我們將討論 D3.js 中的不同請求 API。