D3缩放重置通过刷涂选择的刻度。

时间:2014-05-21 13:07:01

标签: javascript d3.js zooming

我做了缩放和刷牙一起工作。唯一的问题是,当我通过刷涂在X轴上设置特定周期然后尝试使用缩放(在鼠标拖动或鼠标滚轮上)时,它会重置之前选择的比例,因此缩放不会存储x轴域通过刷牙设置之前。

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)

完整代码在这里fiddle。如何强制缩放以记住先前的刷牙选择(位置)?

1 个答案:

答案 0 :(得分:4)

通过在画笔上添加以下行来解决问题:

zoom.x(xScale)
zoom.translate()  

工作示例是here