D3.js - API de arrastamento

Arrastar e soltar é um dos conceitos mais familiares no d3.js. Este capítulo explica como arrastar e seus métodos em detalhes.

Instalação

Podemos incluir arrastar API diretamente usando o seguinte 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>

Arrastando métodos de API

A seguir estão alguns dos métodos de API de arrasto mais importantes em D3.js.

d3.drag()
drag(selection)
drag.container([container])
drag.filter([filter])
drag.subject([subject])
drag.clickDistance([distance])
drag.on (nomes de tipo, [ouvinte])
d3.dragDisable(window)
d3.dragEnable (janela [, noclick])

Vamos agora entender cada um deles em detalhes.

d3.drag ()

Este método é usado para criar um novo arrasto. Você pode chamar esse método usando o seguinte script.

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

arrastar (seleção)

Este método é usado para aplicar o arrasto à seleção especificada. Você pode invocar esta função usandoselection.call. Um exemplo simples é definido abaixo.

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

Aqui, o comportamento de arrastar aplicado aos elementos selecionados é por meio de selection.call.

drag.container([container])

É usado para definir o contêiner para a função especificada para arrastar. Se um contêiner não for especificado, ele retornará o acessador atual. Para arrastar qualquer elemento gráfico com um Canvas, você pode redefinir o contêiner como ele mesmo. É definido abaixo.

function container() {
   return this;
}

drag.filter ([filtro])

É usado para definir o filtro para a função especificada. Se o filtro não for especificado, ele retorna o filtro atual conforme definido abaixo.

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

drag.subject ([assunto])

É usado para definir o assunto para a função especificada para arrastar e é definido abaixo.

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

Aqui, o assunto representa a coisa que está sendo arrastada. Por exemplo, se você deseja arrastar elementos de retângulo em SVG, o assunto padrão é o datum do retângulo que está sendo arrastado.

drag.clickDistance ([distance])

Este método é usado para definir a distância máxima para clicar em um evento de mouse para baixo e mouseup. Se a distância não for especificada, ele aponta para zero.

drag.on (nomes de tipo, [ouvinte])

Este método é usado para definir o ouvinte de eventos para os nomes de tipo especificados para arrastar. Os nomes de tipo são uma string contendo um ou mais nomes de tipo separados por espaços em branco. Cada nome de tipo é um tipo, opcionalmente seguido por um ponto (.) E um nome, como drag.one e drag.two. Este tipo deve ser de um dos seguintes -

start - inicia um novo ponteiro.
drag - arrasta um ponteiro ativo.
end - Inativo um ponteiro ativo.

d3.dragDisable (janela)

Este método é usado para desativar a seleção de arrastar e soltar. Impede a ação de evento do mouseedown. A maioria dos navegadores selecionados suporta esta ação por padrão. Se não houver suporte, você pode definir a propriedade CSS como nenhum.

d3.dragEnable (janela [, noclick])

Este método é usado para habilitar a seleção de arrastar e soltar no local especificado da janela. É usado para chamar a ação do evento mouseup. Se você atribuir o valor noclick for true, o evento click expira um tempo limite de zero milissegundo.

API de arrastamento - eventos de arrastamento

O método D3.event é usado para definir o evento de arrastar. Consiste nos seguintes campos -

Target - Representa o comportamento de arrasto.
Type - É uma string e pode ser qualquer um dos seguintes - “iniciar”, “arrastar” ou “finalizar”.
Subject - O assunto de arrastar, definido por drag.subject.

event.on (nomes de tipo, [ouvinte])

O objeto de evento expõe o método event.on para executar o arrastamento. É definido como segue.

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