D3.js - Sürükleme API'si

Sürükle ve bırak, d3.js'deki en bilinen kavramlardan biridir. Bu bölüm sürüklemeyi ve yöntemlerini ayrıntılı olarak açıklamaktadır.

Kurulum

Aşağıdaki komut dosyasını kullanarak doğrudan API'yi dahil edebiliriz.

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

API Yöntemlerini Sürükleme

Aşağıda, D3.js'deki en önemli sürükleme API yöntemlerinden bazıları verilmiştir.

d3.drag()
drag(selection)
drag.container([container])
drag.filter([filter])
drag.subject([subject])
drag.clickDistance([distance])
drag.on (typenames, [dinleyici])
d3.dragDisable(window)
d3.dragEnable (pencere [, noclick])

Şimdi bunların her birini ayrıntılı olarak anlayalım.

d3.drag ()

Bu yöntem, yeni bir sürükleme oluşturmak için kullanılır. Aşağıdaki komut dosyasını kullanarak bu yöntemi çağırabilirsiniz.

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

sürükle (seçim)

Bu yöntem, sürüklemeyi belirtilen seçime uygulamak için kullanılır. Bu işlevi kullanarak çalıştırabilirsinizselection.call. Aşağıda basit bir örnek tanımlanmıştır.

d3.select(".node").call(d3.drag().on("drag", mousemove));

Burada, seçilen öğelere uygulanan sürükleme davranışı selection.call yoluyladır.

drag.container([container])

Kabı sürüklemek için belirtilen işleve ayarlamak için kullanılır. Bir kap belirtilmezse, geçerli erişimciyi döndürür. Herhangi bir grafik öğesini bir Canvas ile sürüklemek için, kabı kendisi olarak yeniden tanımlayabilirsiniz. Aşağıda tanımlanmıştır.

function container() {
   return this;
}

sürükle.filter ([filtre])

Belirtilen işlev için filtreyi ayarlamak için kullanılır. Filtre belirtilmezse, aşağıda tanımlandığı gibi mevcut filtreyi döndürür.

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

sürükle. konu ([konu])

Konuyu sürükleme için belirtilen işleve ayarlamak için kullanılır ve aşağıda tanımlanmıştır.

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

Burada özne, sürüklenen şeyi temsil eder. Örneğin, SVG'de dikdörtgen öğeleri sürüklemek istiyorsanız, varsayılan konu, sürüklenmekte olan dikdörtgenin verisidir.

drag.clickDistance ([mesafe])

Bu yöntem, bir fare aşağıya tıklama ve fareyi kaldırma olayına yönelik maksimum mesafeyi ayarlamak için kullanılır. Mesafe belirtilmezse, sıfıra işaret eder.

drag.on (typenames, [dinleyici])

Bu yöntem, sürükleme için belirtilen tip adları için olay dinleyicisini ayarlamak için kullanılır. Tür adları, boşlukla ayrılmış bir veya daha fazla tür adı içeren bir dizedir. Her tip adı, isteğe bağlı olarak bir nokta (.) Ve sürükle.bir ve iki sürükleme gibi bir ad izleyen bir türdür. Bu tür aşağıdakilerden birinden olmalıdır -

start - yeni bir işaretçi başlatır.
drag - etkin bir işaretçiyi sürükler.
end - Etkin olmayan bir işaretçiyi devre dışı bırakın.

d3.dragDisable (pencere)

Bu yöntem, sürükle ve bırak seçimini devre dışı bırakmak için kullanılır. Fare düşürme olay eylemini engeller. Seçilen tarayıcıların çoğu bu eylemi varsayılan olarak destekler. Desteklenmiyorsa, CSS özelliğini hiçbiri olarak ayarlayabilirsiniz.

d3.dragEnable (pencere [, noclick])

Bu yöntem, belirtilen pencere konumunda sürükle ve bırak seçimini etkinleştirmek için kullanılır. Mouseup olayı eylemini çağırmak için kullanılır. Noclick değerinin true olduğunu atarsanız, tıklama olayının süresi sıfır milisaniye zaman aşımına uğrar.

Sürükleme API'si - Olayları Sürükleme

Sürükleme olayını ayarlamak için D3.event yöntemi kullanılır. Aşağıdaki alanlardan oluşur -

Target - Sürükleme davranışını temsil eder.
Type - Bu bir dizedir ve şunlardan biri olabilir - "başlangıç", "sürükleme" veya "bitiş".
Subject - Drag.subject ile tanımlanan sürükleme konusu.

event.on (tür adları, [dinleyici])

Olay nesnesi, sürükleme işlemini gerçekleştirmek için event.on yöntemini kullanıma sunar. Aşağıdaki gibi tanımlanır.

d3.event.on("drag", dragged).on("end", ended);