D3.js - API de zoom

O zoom ajuda a dimensionar seu conteúdo. Você pode focar em uma determinada região usando a abordagem clicar e arrastar. Neste capítulo, discutiremos a API de zoom em detalhes.

Configurando API

Você pode carregar a API de zoom diretamente do “d3js.org” usando o seguinte script.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Métodos de API de zoom

A seguir estão alguns dos métodos de API de zoom mais comumente usados.

d3.zoom()
zoom(selection)
zoom.transform (seleção, transformação)
zoom.translateBy (seleção, x, y)
zoom.translateTo (seleção, x, y)
zoom.scaleTo (seleção, k)
zoom.scaleBy (seleção, k)
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on (nomes de tipo [, ouvinte])

Vamos examinar todos esses métodos de API de zoom resumidamente.

d3.zoom ()

Ele cria um novo comportamento de zoom. Podemos acessá-lo usando o script abaixo.

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

zoom (seleção)

É usado para aplicar a transformação de zoom em um elemento selecionado. Por exemplo, você pode instanciar um comportamento mousedown.zoom usando a seguinte sintaxe.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (seleção, transformação)

É usado para definir a transformação de zoom atual dos elementos selecionados para a transformação especificada. Por exemplo, podemos redefinir a transformação de zoom para a transformação de identidade usando a sintaxe abaixo.

selection.call(zoom.transform, d3.zoomIdentity);

Também podemos redefinir a transformação de zoom para a transformação de identidade por 1000 milissegundos usando a seguinte sintaxe.

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (seleção, x, y)

É usado para traduzir a transformação de zoom atual dos elementos selecionados pelos valores xey. Você pode especificar os valores de conversão xey como números ou como funções que retornam números. Se uma função for chamada para o elemento selecionado, ela será passada através do datum atual 'd' e índice 'i' para DOM. Um código de amostra é definido abaixo.

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (seleção, x, y)

É usado para traduzir a transformação de zoom atual dos elementos selecionados para a posição especificada de xe y.

zoom.scaleTo (seleção, k)

É usado para dimensionar a transformação de zoom atual dos elementos selecionados para k. Aqui,k é um fator de escala, especificado como números ou funções.

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (seleção, k)

É usado para dimensionar a transformação zoon atual dos elementos selecionados por k. Aqui,k é um fator de escala, especificado como números ou como funções que retornam números.

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([filtro])

É usado para definir o filtro para a função especificada para o comportamento do zoom. Se o filtro não for especificado, ele retornará o filtro atual conforme mostrado abaixo.

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

zoom.wheelDelta ([delta])

O valor de Δé retornado pela função delta da roda. Se delta não for especificado, ele retornará a função delta da roda atual.

zoom.extent ([extensão])

É usado para definir a extensão dos pontos especificados da matriz. Se a extensão não for especificada, ele retornará o acessador de extensão atual, cujo padrão é [[0, 0], [largura, altura]], onde largura é a largura do cliente do elemento e altura é a altura do cliente.

zoom.scaleExtent ([extensão])

É usado para definir a extensão da escala para a matriz especificada de números [k0, k1]. Aqui,k0é o fator de escala mínimo permitido. Enquanto,k1é o fator de escala máximo permitido. Se a extensão não for especificada, ele retorna a extensão da escala atual, cujo padrão é [0, ∞]. Considere o código de amostra definido abaixo.

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

O usuário pode tentar fazer zoom girando, quando já estiver no limite correspondente da extensão da escala. Se quisermos evitar a rolagem na entrada da roda, independentemente da extensão da escala, registre um ouvinte de evento da roda para evitar o comportamento padrão do navegador.

zoom.translateExtent ([extensão])

Se a extensão for especificada, ele define a extensão da translação para a matriz de pontos especificada. Se a extensão não for especificada, ele retornará a extensão de conversão atual, que é padronizada para [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([distance])

Este método é usado para definir a distância máxima que a área com zoom pode se mover para cima e para baixo, o que acionará um evento de clique subsequente.

zoom.duration ([duração])

Este método é usado para definir a duração das transições de zoom com um clique duplo e um toque duplo no número especificado de milissegundos e retorna o comportamento do zoom. Se a duração não for especificada, ele retornará a duração atual, que é padronizada para 250 milissegundos, definida abaixo.

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([interpolate])

Este método é usado para interpolar as transições de zoom para a função especificada. Se interpolate não for especificado, ele retorna a fábrica de interpolação atual, cujo padrão é d3.interpolateZoom.

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

Se o ouvinte for especificado, ele define o ouvinte de eventos para os nomes de tipo especificados e retorna o comportamento do zoom. 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 zoom.um e zoom.segundo. O nome permite que vários ouvintes sejam registrados para o mesmo tipo. Este tipo deve ser de um dos seguintes -

Start - após o início do zoom (como no botão do mouse).
Zoom - após uma alteração na transformação do zoom (como no mouse).
End - após o zoom terminar (como ao mover o mouse para cima).

No próximo capítulo, discutiremos as diferentes solicitações de API em D3.js.