Subject. As far as I understand, zoom can be organized in 3 ways:

  • transform: scale ()
  • css-zoom
  • And manual recalculation of points on the chart

What is used in D3? Thank!

  • The zoom css property is not cross-browser, so it is no good. - Qwertiy ♦

1 answer 1

D3 suggests using transform: scale()

 var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); ... var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.right + ")") .call(zoom); ... function zoomed() { container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale + ")"); }

Complete example .