D3 Zoom resets scales selected via brushing.

2019-08-28 08:27发布

问题:

I've made zooming and brushing working together. The only problem is, when I've set the particular period on X axis via brushing and then trying to use zoom (on mouse drag or mouse wheel), it resets previous selected scales, so zoom doesn't store x axis domain that was set via brushing before.

zoomRight = d3.behavior.zoom()
  .x(xScale)
  .y(yRightScale)
  .scaleExtent([1,20])

zoomed = ->
  zoomRight.scale(zoom.scale()).translate(zoom.translate())
  canvas.select("._x._axis").call xAxis
  canvas.select(".axisLeft").call yLeftAxis
  canvas.select(".axisRight").call yRightAxis
  canvas.select(".y.grid").call make_y_axis().tickSize(-width, 0, 0).tickFormat("")
  canvas.select(".line1").attr("d", line1(data))
  canvas.select(".line2").attr("d", line2(data))
  brush.extent(xScale.domain())
  canvas.select(".brush").call(brush)

zoom = d3.behavior.zoom()
  .x(xScale)
  .y(yLeftScale)
  .scaleExtent([1,20]) # 20x times zoom
  .on("zoom", zoomed)

Full code is here fiddle. How can I force zoom to remember the previous brushing selection(position)?

回答1:

Solved the problem by adding the following lines on brush:

zoom.x(xScale)
zoom.translate()  

Working example is here.