D3.js - Yakınlaştırma API'si

Yakınlaştırma, içeriğinizi ölçeklendirmenize yardımcı olur. Tıkla ve sürükle yaklaşımını kullanarak belirli bir bölgeye odaklanabilirsiniz. Bu bölümde, Yakınlaştırma API'sini ayrıntılı olarak tartışacağız.

API'yi Yapılandırma

Yakınlaştırma API'sini aşağıdaki komut dosyasını kullanarak doğrudan "d3js.org" dan yükleyebilirsiniz.

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

Yakınlaştırma API Yöntemleri

Aşağıda en sık kullanılan Yakınlaştırma API Yöntemlerinden bazıları verilmiştir.

d3.zoom()
zoom(selection)
zoom.transform (seçim, dönüştürme)
zoom.translateBy (seçim, x, y)
zoom.translateTo (seçim, x, y)
zoom.scaleTo (seçim, k)
zoom.scaleBy (seçim, 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 [, dinleyici])

Kısaca tüm bu Zooming API yöntemlerinden geçelim.

d3.zoom ()

Yeni bir yakınlaştırma davranışı yaratır. Aşağıdaki komut dosyasını kullanarak ona erişebiliriz.

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

yakınlaştır (seçim)

Yakınlaştırma dönüşümünü seçilen bir öğeye uygulamak için kullanılır. Örneğin, aşağıdaki sözdizimini kullanarak bir mousedown.zoom davranışını başlatabilirsiniz.

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

zoom.transform (seçim, dönüştürme)

Seçilen elemanların geçerli yakınlaştırma dönüşümünü belirtilen dönüşüme ayarlamak için kullanılır. Örneğin, aşağıdaki sözdizimini kullanarak yakınlaştırma dönüşümünü kimlik dönüşümüne sıfırlayabiliriz.

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

Ayrıca aşağıdaki sözdizimini kullanarak yakınlaştırma dönüşümünü kimlik dönüşümüne 1000 milisaniye için sıfırlayabiliriz.

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

zoom.translateBy (seçim, x, y)

Seçilen elemanların mevcut yakınlaştırma dönüşümünü x ve y değerlerine çevirmek için kullanılır. X ve y çeviri değerlerini sayı olarak veya sayı döndüren işlevler olarak belirtebilirsiniz. Seçilen öğe için bir işlev çağrılırsa, bu, DOM için geçerli veri 'd' ve dizin 'i' içinden geçirilir. Aşağıda örnek bir kod tanımlanmıştır.

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 (seçim, x, y)

Seçilen öğelerin mevcut yakınlaştırma dönüşümünü x ve y'nin belirtilen konumuna çevirmek için kullanılır.

zoom.scaleTo (seçim, k)

Seçilen öğelerin mevcut yakınlaştırma dönüşümünü ölçeklendirmek için kullanılır. k. Buraya,k sayılar veya işlevler olarak belirtilen bir ölçek faktörüdür.

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

zoom.scaleBy (seçim, k)

Seçilen elemanların mevcut zoon dönüşümünü ölçmek için kullanılır. k. Buraya,k sayı olarak veya sayı döndüren işlevler olarak belirtilen bir ölçek faktörüdür.

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

Yakınlaştırma davranışı için filtreyi belirtilen işleve ayarlamak için kullanılır. Filtre belirtilmezse, aşağıda gösterildiği gibi mevcut filtreyi döndürür.

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

zoom.wheelDelta ([delta])

Değeri Δtekerlek delta işlevi tarafından döndürülür. Delta belirtilmezse, geçerli tekerlek delta işlevini döndürür.

zoom.extent ([kapsam])

Belirtilen dizi noktalarının kapsamını ayarlamak için kullanılır. Kapsam belirtilmezse, varsayılan olarak [[0, 0], [genişlik, yükseklik]] olan geçerli kapsam erişimcisini döndürür; burada genişlik, öğenin istemci genişliği ve yükseklik, istemci yüksekliğidir.

zoom.scaleExtent ([kapsam])

Ölçek kapsamını belirtilen sayı dizisine [k0, k1] ayarlamak için kullanılır. Buraya,k0izin verilen minimum ölçek faktörüdür. Süre,k1izin verilen maksimum ölçek faktörüdür. Kapsam belirtilmezse, varsayılan olarak [0, ∞] olan geçerli ölçek kapsamını döndürür. Aşağıda tanımlanan örnek kodu düşünün.

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

Kullanıcı, ölçek kapsamının ilgili sınırındayken, dönerek yakınlaştırmayı deneyebilir. Ölçek kapsamına bakılmaksızın tekerlek girişinde kaydırmayı önlemek istiyorsak, tarayıcının varsayılan davranışını önlemek için bir tekerlek olay dinleyicisi kaydedin.

zoom.translateExtent ([kapsam])

Kapsam belirtilirse, çeviri kapsamını belirtilen nokta dizisine ayarlar. Kapsam belirtilmezse, varsayılan olarak [[-∞, -∞], [+ ∞, + ∞]] olan geçerli çeviri kapsamını döndürür.

zoom.clickDistance ([mesafe])

Bu yöntem, yakınlaştırılabilir alanın yukarı ve aşağı arasında hareket edebileceği maksimum mesafeyi ayarlamak için kullanılır; bu, sonraki bir tıklama olayını tetikler.

zoom.duration ([süre])

Bu yöntem, çift tıklama ve belirtilen milisaniye sayısına çift dokunma sırasında yakınlaştırma geçişlerinin süresini ayarlamak için kullanılır ve yakınlaştırma davranışını döndürür. Süre belirtilmezse, aşağıda tanımlanan varsayılan olarak 250 milisaniye olan geçerli süreyi döndürür.

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

zoom.interpolate ([interpolate])

Bu yöntem, belirtilen işleve yakınlaştırma geçişleri için enterpolasyon yapmak için kullanılır. Enterpolate belirtilmezse, varsayılan olarak d3.interpolateZoom olan geçerli enterpolasyon fabrikasını döndürür.

zoom.on (typenames [, dinleyici])

Dinleyici belirtilirse, belirtilen tür adları için olay dinleyicisini ayarlar ve yakınlaştırma davranışını döndürür. Tür adları, boşlukla ayrılmış bir veya daha fazla tür adı içeren bir dizedir. Her tür adı, isteğe bağlı olarak bir nokta (.) Ve yakınlaştırma.bir ve yakınlaştırma.saniye gibi bir ad olan bir türdür. Ad, aynı tür için birden çok dinleyicinin kaydedilmesine izin verir. Bu tür aşağıdakilerden birinden olmalıdır -

Start - yakınlaştırma başladıktan sonra (fare aşağıdayken olduğu gibi).
Zoom - yakınlaştırma dönüşümünde bir değişiklikten sonra (fare hareketinde olduğu gibi).
End - yakınlaştırma bittikten sonra (örneğin fareyle yukarı kaldırıldığında).

Bir sonraki bölümde, D3.js'de farklı istek API'sini tartışacağız.