D3.js - Zooming API

Powiększanie pomaga skalować zawartość. Możesz skupić się na konkretnym regionie, używając metody „kliknij i przeciągnij”. W tym rozdziale omówimy szczegółowo Zooming API.

Konfigurowanie API

Możesz załadować Zooming API bezpośrednio z „d3js.org” za pomocą następującego skryptu.

<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>

Zooming API Methods

Poniżej przedstawiono niektóre z najczęściej używanych metod Zooming API.

d3.zoom()
zoom(selection)
zoom.transform (wybór, transformacja)
zoom.translateBy (wybór, x, y)
zoom.translateTo (zaznaczenie, x, y)
zoom.scaleTo (wybór, k)
zoom.scaleBy (wybór, 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 (nazwy typów [, słuchacz])

Przyjrzyjmy się w skrócie wszystkim metodom Zooming API.

d3.zoom ()

Tworzy nowe zachowanie zoomu. Możemy uzyskać do niego dostęp za pomocą poniższego skryptu.

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

zoom (wybór)

Służy do zastosowania transformacji powiększenia na wybranym elemencie. Na przykład możesz utworzyć wystąpienie zachowania mousedown.zoom, używając następującej składni.

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

zoom.transform (wybór, transformacja)

Służy do ustawienia bieżącej transformacji powiększenia wybranych elementów do określonej transformacji. Na przykład możemy zresetować transformację powiększenia do transformacji tożsamości, używając poniższej składni.

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

Możemy również zresetować transformację powiększenia do transformacji tożsamości na 1000 milisekund, używając następującej składni.

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

zoom.translateBy (wybór, x, y)

Służy do tłumaczenia aktualnej transformacji powiększenia wybranych elementów o wartości x i y. Wartości translacji x i y można określić jako liczby lub jako funkcje zwracające liczby. Jeśli funkcja jest wywoływana dla wybranego elementu, to jest ona przepuszczana przez bieżące odniesienie „d” i indeks „i” dla DOM. Przykładowy kod zdefiniowano poniżej.

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 (zaznaczenie, x, y)

Służy do translacji bieżącej transformacji powiększenia wybranych elementów do określonej pozycji x i y.

zoom.scaleTo (wybór, k)

Służy do skalowania bieżącej transformacji powiększenia wybranych elementów do k. Tutaj,k jest współczynnikiem skali, określanym jako liczby lub funkcje.

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

zoom.scaleBy (wybór, k)

Służy do skalowania aktualnej transformacji zoonowej wybranych elementów według k. Tutaj,k jest współczynnikiem skali, określanym jako liczby lub jako funkcje zwracające liczby.

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 ([filtr])

Służy do ustawiania filtru na określoną funkcję dla zachowania zoomu. Jeśli filtr nie jest określony, zwraca bieżący filtr, jak pokazano poniżej.

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

zoom.wheelDelta ([delta])

Wartość Δjest zwracana przez funkcję delta koła. Jeśli delta nie jest określona, zwraca bieżącą funkcję delta koła.

zoom.extent ([zakres])

Służy do ustawiania zasięgu do określonych punktów szyku. Jeśli zasięg nie jest określony, zwraca bieżący akcesor zakresu, który domyślnie wynosi [[0, 0], [szerokość, wysokość]], gdzie szerokość to szerokość klienta elementu, a wysokość to jego wysokość klienta.

zoom.scaleExtent ([zakres])

Służy do ustawiania zakresu skali do określonej tablicy liczb [k0, k1]. Tutaj,k0to minimalny dopuszczalny współczynnik skali. Podczas,k1to maksymalny dozwolony współczynnik skali. Jeśli nie określono zasięgu, zwraca bieżący zasięg skali, który domyślnie wynosi [0, ∞]. Rozważ przykładowy kod zdefiniowany poniżej.

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

Użytkownik może spróbować powiększyć, obracając, gdy już osiągnął odpowiedni limit zakresu skali. Jeśli chcemy zapobiec przewijaniu danych wejściowych kółkiem niezależnie od zakresu skali, zarejestruj detektor zdarzeń koła, aby zapobiec domyślnemu zachowaniu przeglądarki.

zoom.translateExtent ([zakres])

Jeśli zakres jest określony, ustawia on przesunięcie do określonej tablicy punktów. Jeśli nie określono zakresu, zwraca bieżący zakres tłumaczenia, który domyślnie wynosi [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([odległość])

Ta metoda służy do ustawiania maksymalnej odległości, na jaką obszar skalowalny może się poruszać w górę iw dół, co wywoła kolejne zdarzenie kliknięcia.

zoom.duration ([duration])

Ta metoda służy do ustawiania czasu trwania zmian powiększenia po dwukrotnym kliknięciu i dwukrotnym dotknięciu do określonej liczby milisekund i zwraca zachowanie powiększenia. Jeśli czas trwania nie zostanie określony, zwraca bieżący czas trwania, który domyślnie wynosi 250 milisekund, co jest zdefiniowane poniżej.

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

zoom.interpolate ([interpoluj])

Ta metoda jest używana do interpolacji przejść zoomu do określonej funkcji. Jeśli interpolacja nie jest określona, zwraca bieżącą fabrykę interpolacji, która domyślnie d3.interpolateZoom.

zoom.on (nazwy typów [, słuchacz])

Jeśli detektor jest określony, ustawia detektor zdarzeń dla określonych nazw typów i zwraca zachowanie powiększenia. Nazwy typów to ciąg znaków zawierający jedną lub więcej nazw typów oddzielonych spacjami. Każda nazwa typu jest typem, po którym opcjonalnie następuje kropka (.) I nazwa, na przykład zoom.one i zoom.second. Nazwa umożliwia zarejestrowanie wielu odbiorników tego samego typu. Ten typ musi należeć do jednego z następujących -

Start - po rozpoczęciu przybliżania (np. Po przesunięciu kursora).
Zoom - po zmianie na transformację powiększenia (np. Po przesunięciu myszy).
End - po zakończeniu powiększania (np. Po najechaniu myszą).

W następnym rozdziale omówimy różne API żądań w D3.js.