D3.js - API di trascinamento

Il drag and drop è uno dei concetti più familiari in d3.js. Questo capitolo spiega in dettaglio il trascinamento e i suoi metodi.

Installazione

Possiamo includere direttamente l'API di trascinamento utilizzando il seguente script.

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

Trascinamento dei metodi API

Di seguito sono riportati alcuni dei metodi API di trascinamento più importanti in D3.js.

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

Vediamo ora di capire ciascuno di questi in dettaglio.

d3.drag ()

Questo metodo viene utilizzato per creare un nuovo trascinamento. È possibile chiamare questo metodo utilizzando il seguente script.

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

trascina (selezione)

Questo metodo viene utilizzato per applicare il trascinamento alla selezione specificata. Puoi richiamare questa funzione usandoselection.call. Di seguito viene definito un semplice esempio.

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

Qui, il comportamento di trascinamento applicato agli elementi selezionati avviene tramite selection.call.

drag.container([container])

Viene utilizzato per impostare il contenitore sulla funzione specificata per il trascinamento. Se un contenitore non viene specificato, restituisce la funzione di accesso corrente. Per trascinare qualsiasi elemento grafico con una tela, puoi ridefinire il contenitore come se stesso. È definito di seguito.

function container() {
   return this;
}

drag.filter ([filtro])

Viene utilizzato per impostare il filtro per la funzione specificata. Se il filtro non è specificato, restituisce il filtro corrente come definito di seguito.

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

drag.subject ([oggetto])

Viene utilizzato per impostare l'oggetto sulla funzione specificata per il trascinamento ed è definito di seguito.

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

Qui, il soggetto rappresenta la cosa trascinata. Ad esempio, se desideri trascinare elementi rettangolari in SVG, l'oggetto predefinito è il dato del rettangolo che viene trascinato.

drag.clickDistance ([distanza])

Questo metodo viene utilizzato per impostare la distanza massima per fare clic su un evento mousedown e mouseup. Se la distanza non è specificata, punta a zero.

drag.on (typenames, [listener])

Questo metodo viene utilizzato per impostare il listener di eventi per i nomi di tipo specificati per il trascinamento. I nomi dei tipi sono una stringa contenente uno o più nomi di tipi separati da spazi. Ogni nome di tipo è un tipo, eventualmente seguito da un punto (.) E da un nome, ad esempio drag.one e drag.two. Questo tipo dovrebbe provenire da uno dei seguenti:

  • start - avvia un nuovo puntatore.

  • drag - trascina un puntatore attivo.

  • end - Inattivo un puntatore attivo.

d3.dragDisable (finestra)

Questo metodo viene utilizzato per disabilitare la selezione del trascinamento. Impedisce l'azione dell'evento mousedown. La maggior parte dei browser selezionati supporta questa azione per impostazione predefinita. Se non supportato, puoi impostare la proprietà CSS su nessuno.

d3.dragEnable (finestra [, noclick])

Questo metodo viene utilizzato per abilitare la selezione del trascinamento della selezione nella posizione della finestra specificata. Viene utilizzato per richiamare l'azione dell'evento mouseup. Se si assegna il valore noclick a true, l'evento click scade con un timeout di zero millisecondi.

API di trascinamento: trascina eventi

Il metodo D3.event viene utilizzato per impostare l'evento di trascinamento. Consiste dei seguenti campi:

  • Target - Rappresenta il comportamento di trascinamento.

  • Type - È una stringa e può essere una delle seguenti: "inizio", "trascina" o "fine".

  • Subject - L'oggetto del trascinamento, definito da drag.subject.

event.on (typenames, [listener])

L'oggetto evento espone il metodo event.on per eseguire il trascinamento. È definito come segue.

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