🥇 Maneira mais simples de adicionar zoom / panorâmica em d3.js (versão 3 e 4)

Eu precisava adicionar zoom / pan na visualização do d3.js. Depois de uma busca dolorosa no Google, finalmente encontrei uma maneira simples de fazer isso.

d3.js tem tudo a ver com apenas algumas linhas de código.

Você só precisa criar um gelemento como primeiro filho do elemento SVG e conectar o d3.behavior.zoom()comportamento.

var svg = d3.select("body")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .call(d3.behavior.zoom().on("zoom", function () {
    svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
  }))
  .append("g")

É isso aí!

Agora você pode adicionar todos os nós SVG a esse gelemento de porta de visualização.

Há um exemplo ao vivo aqui: http://bl.ocks.org/sgruhier/1d692762f8328a2c9957

Atualização para v4

Para d3v4 é ainda mais simples, sem mais d3.behavior.zoom()comportamento.

var svg = d3.select("body")
 .append("svg")
 .attr("width", "100%")
 .attr("height", "100%")
 .call(d3.zoom().on("zoom", function () {
    svg.attr("transform", d3.event.transform)
 }))
 .append("g")

Há um exemplo ao vivo aqui https://bl.ocks.org/sgruhier/50990c01fe5b6993e82b8994951e23d0

Atualização para v4

Related Posts