D3.js - Dragging API

Przeciągnij i upuść to jedna z najbardziej znanych koncepcji w d3.js. W tym rozdziale szczegółowo opisano przeciąganie i jego metody.

Instalacja

Możemy bezpośrednio włączyć przeciąganie API za pomocą następującego skryptu.

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

Przeciąganie metod API

Oto niektóre z najważniejszych przeciągających metod API w D3.js.

d3.drag()
drag(selection)
drag.container([container])
drag.filter([filter])
drag.subject([subject])
drag.clickDistance([distance])
drag.on (nazwy typów, [słuchacz])
d3.dragDisable(window)
d3.dragEnable (window [, noclick])

Przyjrzyjmy się teraz szczegółowo każdemu z nich.

d3.drag ()

Ta metoda służy do tworzenia nowego przeciągania. Możesz wywołać tę metodę za pomocą następującego skryptu.

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

przeciągnij (wybór)

Ta metoda jest używana do zastosowania przeciągania do określonego zaznaczenia. Możesz wywołać tę funkcję za pomocąselection.call. Poniżej zdefiniowano prosty przykład.

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

Tutaj zachowanie przeciągania zastosowane do wybranych elementów odbywa się poprzez selection.call.

drag.container([container])

Służy do ustawiania kontenera na określoną funkcję do przeciągania. Jeśli kontener nie zostanie określony, zwraca bieżący akcesor. Aby przeciągnąć dowolne elementy graficzne za pomocą kanwy, możesz przedefiniować kontener jako siebie. Jest zdefiniowany poniżej.

function container() {
   return this;
}

drag.filter ([filtr])

Służy do ustawiania filtru dla określonej funkcji. Jeśli filtr nie jest określony, zwraca bieżący filtr, zgodnie z poniższą definicją.

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

drag.subject ([temat])

Służy do ustawiania przedmiotu do określonej funkcji do przeciągania i jest zdefiniowana poniżej.

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

Tutaj temat przedstawia ciągniętą rzecz. Na przykład, jeśli chcesz przeciągnąć elementy prostokąta w SVG, domyślnym tematem jest odniesienie przeciąganego prostokąta.

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

Ta metoda służy do ustawiania maksymalnej odległości kliknięcia zdarzenia przesunięcia kursora myszy i przesunięcia kursora myszy. Jeśli odległość nie jest określona, wskazuje zero.

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

Ta metoda służy do ustawiania detektora zdarzeń dla określonych nazw typów do przeciągania. 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 drag.one i drag.two. Ten typ powinien należeć do jednego z następujących -

start - uruchamia nowy wskaźnik.
drag - przeciąga aktywny wskaźnik.
end - Nieaktywny aktywny wskaźnik.

d3.dragDisable (okno)

Ta metoda służy do wyłączania przeciągania i upuszczania wyboru. Zapobiega działaniu zdarzenia wyciszenia myszy. Większość wybranych przeglądarek domyślnie obsługuje tę akcję. Jeśli nie jest obsługiwana, możesz ustawić właściwość CSS na none.

d3.dragEnable (window [, noclick])

Ta metoda służy do włączania przeciągania i upuszczania w określonej lokalizacji okna. Służy do wywołania akcji zdarzenia myszy. Jeśli ustawisz wartość noclick na true, zdarzenie kliknięcia wygaśnie po upływie zerowego limitu czasu.

Dragging API - Drag Events

Metoda D3.event służy do ustawiania zdarzenia przeciągania. Składa się z następujących pól -

Target - Reprezentuje zachowanie podczas przeciągania.
Type - Jest to ciąg i może to być jeden z następujących elementów - „początek”, „przeciągnij” lub „koniec”.
Subject - Temat przeciągania, zdefiniowany przez drag.subject.

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

Obiekt zdarzenia ujawnia metodę event.on w celu wykonania przeciągania. Jest zdefiniowany w następujący sposób.

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