D3.js - 縮放API

縮放有助於調整內容比例。您可以使用點選和拖動的方法來關注特定區域。本章將詳細討論縮放API。

配置API

您可以使用以下指令碼直接從“d3js.org”載入縮放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方法

以下是一些最常用的縮放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([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on(typenames[, listener])

讓我們簡要了解所有這些縮放API方法。

d3.zoom()

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

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

zoom(selection)

它用於將縮放變換應用於選定的元素。例如，您可以使用以下語法例項化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平移值指定為數字，也可以指定為返回數字的函式。如果為選定元素呼叫函式，則將其通過當前資料“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(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([delta])

Δ的值由輪子增量函式返回。如果未指定delta，則返回當前輪子增量函式。

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設定事件監聽器並返回縮放行為。typenames是一個字串，其中包含一個或多個由空格分隔的typename。每個typename都是一個型別，後面可以選擇跟一個句點(.)和一個名稱，例如zoom.one和zoom.second。該名稱允許為同一型別註冊多個監聽器。此型別必須來自以下之一：

開始 - 縮放開始後（例如，在mousedown時）。
縮放 - 縮放變換更改後（例如，在mousemove時）。
結束 - 縮放結束後（例如，在mouseup時）。

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

列印頁面