d3 change scale domain and keep the zoom working as expected

Question

I have a question about zoom and scale/axis.

At some point my chart has the following configuration:

Y domain scale:

this.scaleY = d3
  .scaleLinear()
  .domain([10, 20])
  .range([this.chartHeight, 0]);

ZoomTransform:

{
  x: -10,
  y: -4,
  k: 0.2
}

now, I change programmatically the y-scale domain (and axis):

this.scaleY = d3
  .scaleLinear()
  .domain([80, 100])
  .range([this.chartHeight, 0]);

The problem is that if I zoom in/out, the y-scale go back to the original one.

So I'd like to change the domain of one axis, and keep the zoom working as expected.

I hope I've made myself clear.

Do you see any solutions in order to keep the current zoom and simply update the axis? I don't want to reset my zoom to the Identity.

Thank you

Answer 1

The d3.event.transform object also contains other methods on its prototype such as rescaleY() .

rescaleY(originalYScale) will return ay scale whose domain has been altered to take account of the d3.event.transform 's current transform parameters.

Then you can update your y axis with this new scale using the axis.scale() setter method. And finally, you can update your axis element ( g element) using the `call() method.

So, as shown in Mike Bostock's zoom example , your zoom callback may look like:

function zoomed() {
  view.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
  gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}