Zoom Left And Right Axis For Dual Scaled Chart In D3

I have dual scaled line chart using d3, coffescript is below # bottom axis xScale = d3.time.scale().range([0,width]).domain(d3.extent(data, (d) -> d.date)) xAxis = d3.svg.axis()

Solution 1:

In your myZoom function, you can explicitly set the domain of the yLeftScale:

myZoom = ->
  scale = d3.event.scale
  translate = d3.event.translate

  # Haven't verified these calculations. Is it scale first or translate first?
  # See `alternate answer` below for a better approach
  yLeftScale.domain([0 + translate[1], yLeftMax / scale + translate[1])
  canvas.select("._x._axis").call xAxis
  canvas.select(".axisLeft").call yLeftAxis  # can't zoom left axis here
  canvas.select(".axisRight").call yRightAxis # Zoom right axis
  canvas.select(".line1").attr("d", line1(data)) # Zoom left scaled line
  canvas.select(".line2").attr("d", line2(data)) # Zoom right scaled line

---

And alternate solution is having two separate zoom behaviors and controlling the other zoom behavior instead of manually updating the domains. I find this to be more robust though a bit more verbose.

zoomLeft = d3.behavior.zoom()
 .x(xScale) # set xScale for zoom 
 .y(yLeftScale) # can't set left yScale for zoom here
 .scaleExtent([1,20]) # 20x times zoom

and in myZoom, set the zoomLeft's scale and translate:

myZoom = ->
  zoomLeft.scale(zoom.scale()).translate(zoom.translate())

  canvas.select("._x._axis").call xAxis
  canvas.select(".axisLeft").call yLeftAxis  # can't zoom left axis here
  canvas.select(".axisRight").call yRightAxis # Zoom right axis
  canvas.select(".line1").attr("d", line1(data)) # Zoom left scaled line
  canvas.select(".line2").attr("d", line2(data)) # Zoom right scaled line