score:2

Accepted answer

calling y1.range() (without any arguments) will return you the [min, max] of the scale.

from the docs:

if values is not specified, returns the scale's current output range.

most accessor functions in d3 work like this, they return you (get) the value if you call them without any arguments and set the value if you call them with arguments and return the this object for easy chaining:

d3object.propertyname = function (_) {
    if (!arguments.length) return propertyname;
    propertyname = _;
    return this;
}

however, the zoom behaviour alters the domain and not the range of the scales.

from the docs:

specifies an x-scale whose domain should be automatically adjusted when zooming.

hence, you do do not need to get/set the range, but instead the domain of the scales y1 and y2: y2.domain(y1.domain()).

score:2

since the zoom function already manages all the ratios, a more abbreviated answer would be:

var zoomfirst = d3.behavior.zoom()
  .x(x)
  .y(y1)
  .scaleextent([0, 3])
  .size([w, h])
  .on("zoom", function() {
    zoomsecond.scale(zoom.scale());
    zoomsecond.translate(zoom.translate());

    // update visual. both y domains will now be updated

  });

// create copy for y2 scale
var zoomsecond = d3.behavior.zoom()
  .x(x)
  .y(y2)                // <-- second scale
  .scaleextent([0, 3])  // <-- extent

this assumes you have called only zoomfirst to your visual.


Related Query

More Query from same tag