D3.js: API de arrastre

Arrastrar y soltar es uno de los conceptos más familiares en d3.js. Este capítulo explica el arrastre y sus métodos en detalle.

Instalación

Podemos incluir directamente la API de arrastre usando el siguiente 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>

Arrastrar métodos de API

A continuación se muestran algunos de los métodos de API de arrastre más importantes en D3.js.

  • d3.drag()
  • drag(selection)
  • drag.container([container])
  • drag.filter([filter])
  • drag.subject([subject])
  • drag.clickDistance([distance])
  • drag.on (nombres de tipo, [oyente])
  • d3.dragDisable(window)
  • d3.dragEnable (ventana [, sin hacer clic])

Entendamos ahora cada uno de estos en detalle.

d3.drag ()

Este método se utiliza para crear un nuevo arrastre. Puede llamar a este método utilizando el siguiente script.

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

arrastrar (selección)

Este método se utiliza para aplicar el arrastre a la selección especificada. Puede invocar esta función usandoselection.call. A continuación se define un ejemplo sencillo.

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

Aquí, el comportamiento de arrastre aplicado a los elementos seleccionados es a través de selection.call.

drag.container([container])

Se utiliza para configurar el contenedor en la función especificada para arrastrar. Si no se especifica un contenedor, devuelve el descriptor de acceso actual. Para arrastrar cualquier elemento gráfico con un lienzo, puede redefinir el contenedor como él mismo. Se define a continuación.

function container() {
   return this;
}

drag.filter ([filtro])

Se utiliza para configurar el filtro para la función especificada. Si no se especifica el filtro, devuelve el filtro actual como se define a continuación.

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

drag.subject ([sujeto])

Se utiliza para configurar el sujeto a la función especificada para arrastrar y se define a continuación.

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

Aquí, el sujeto representa la cosa que se arrastra. Por ejemplo, si desea arrastrar elementos rectangulares en SVG, el asunto predeterminado es el dato del rectángulo que se arrastra.

drag.clickDistance ([distancia])

Este método se utiliza para establecer la distancia máxima para hacer clic en un evento de mousedown y mouseup. Si no se especifica la distancia, apunta a cero.

drag.on (nombres de tipo, [oyente])

Este método se utiliza para configurar el detector de eventos para los nombres de tipo especificados para arrastrar. Los nombres de tipos son una cadena que contiene uno o más nombres de tipos separados por espacios en blanco. Cada nombre de tipo es un tipo, seguido opcionalmente por un punto (.) Y un nombre, como drag.one y drag.two. Este tipo debe ser de uno de los siguientes:

  • start - inicia un nuevo puntero.

  • drag - arrastra un puntero activo.

  • end - Inactivo un puntero activo.

d3.dragDisable (ventana)

Este método se utiliza para desactivar la selección de arrastrar y soltar. Evita la acción del evento de mousedown. La mayoría de los navegadores seleccionados admiten esta acción de forma predeterminada. Si no es compatible, puede establecer la propiedad CSS en none.

d3.dragEnable (ventana [, sin hacer clic])

Este método se utiliza para habilitar la selección de arrastrar y soltar en la ubicación de la ventana especificada. Se utiliza para llamar a la acción del evento mouseup. Si asigna el valor de noclick es verdadero, el evento de clic expira un tiempo de espera de cero milisegundos.

API de arrastre: eventos de arrastre

El método D3.event se utiliza para configurar el evento de arrastre. Consta de los siguientes campos:

  • Target - Representa el comportamiento de arrastre.

  • Type - Es una cadena y puede ser cualquiera de las siguientes: "iniciar", "arrastrar" o "finalizar".

  • Subject - El sujeto de arrastre, definido por drag.subject.

event.on (nombres de tipo, [oyente])

El objeto de evento expone el método event.on para realizar el arrastre. Se define como sigue.

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