Accepted answer

So you wish to change

xAxisScale = new_xScale; yAxisScale = new_yScale;

inside the zoom function for some reason.

If you do it the rescale will not work as expected.

  var new_xScale = d3.event.transform.rescaleX(xAxisScale)
  var new_yScale = d3.event.transform.rescaleY(yAxisScale)

Reason: xAxisScale andyAxisScale should be the original, because the rescale is calculated based/relative to the original scale value.

One way to get around this would be to make a copy of the original x and y scale.

// create scale objects
var xAxisScale =d3.scaleLinear()

var yAxisScale = d3.scaleLinear()

//make a copy of the scales
var copyX = xAxisScale.copy();  
var copyY = yAxisScale.copy();  
// create axis objects

Next in your zoomFunction do :

function zoomFunction(){
  // create new scale ojects based on event
  var new_xScale = d3.event.transform.rescaleX(copyX)
  var new_yScale = d3.event.transform.rescaleY(copyY)
  //changing scale due to some reason.
  xAxisScale = new_xScale;
  yAxisScale = new_yScale;

  // update axes;;

  // update circle
  circles.attr("transform", d3.event.transform)

working code here

Related Query

More Query from same tag