缩放或平移D3.js时域限制(Limiting domain when zooming or pan

我已经实现，可以缩放和平移一个简单的D3.js线图。 它是基于斯蒂芬Bannasch的很好的例子在这里 。

我的数据的域为[0，N]在x维度。

如何限制缩放和使用（即使用鼠标滚轮事件）内置变焦平移行为这个领域？

我想阻止用户平移过去0，在其下端或N的上端，例如他们不应该能够看到在x轴的负值，并希望限制缩放到同一窗口。

我发现基于杰森·戴维斯利用工作程度的例子（[...] [...]，[...]）似乎不再工作的2.9.1版本。 不幸的是，变焦行为是目前的，否则优秀的API文档中未记录的几个特点之一。

任何指针欢迎。

PS。 我已经发布了D3.js邮件列表上同样的问题，但没有得到回应： https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion 。 道歉交叉张贴。

Answer 1:

你只需要限制对重绘域。 下面的代码将防止缩小过去它的初始结构域（如在所使用的图表http://bl.ocks.org/1182434 ）。

SimpleGraph.prototype.redraw = function() {
  var self = this;
  return function() {

    self.x.domain([Math.max(self.x.domain()[0], self.options.xmin), Math.min(self.x.domain()[1], self.options.xmax)]);

    self.y.domain([Math.max(self.y.domain()[0], self.options.ymin), Math.min(self.y.domain()[1], self.options.ymax)]);

    ....

Answer 2:

可悲的是，发表比尔解决方案确实只有一半的伎俩：虽然它确实抑制平移，它使图形如果使用变焦扭曲。 它是那么通常不可能返回到正确比例和位置图。

在接下来的版本中轴线的比例维持不变，即使滚动到边界。

一旦缩放达到100％，天秤域复位到原来的位置。 这保证了正确的定位，即使中间步骤返回轴非法参数。

虽然并不完美，我希望这个脚本可以帮助别人，直到D3（重新）实现此功能。

# x and y are the scales
# xAxis and yAxis are the axes
# graph is the graph you want attach the zoom to

x0 = x.copy()
y0 = y.copy()

successfulTranslate = [0, 0]

zoomer = d3.behavior.zoom()
  .scaleExtent([1,2])

onZoom = ->
  ev = d3.event # contains: .translate[x,y], .scale
  if ev.scale == 1.0
    x.domain x0.domain()
    y.domain y0.domain()
    successfulTranslate = [0, 0]
  else
    xTrans = x0.range().map( (xVal) -> (xVal-ev.translate[0]) / ev.scale ).map(x0.invert)
    yTrans = y0.range().map( (yVal) -> (yVal-ev.translate[1]) / ev.scale ).map(y0.invert)
    xTransOk = xTrans[0] >= x0.domain()[0] and xTrans[1] <= x0.domain()[1]
    yTransOk = yTrans[0] >= y0.domain()[0] and yTrans[1] <= y0.domain()[1]
    if xTransOk
      x.domain xTrans
      successfulTranslate[0] = ev.translate[0]
    if yTransOk
      y.domain yTrans
      successfulTranslate[1] = ev.translate[1]
  zoomer.translate successfulTranslate

graph.select('g.x.axis').call(xAxis)
graph.select('g.y.axis').call(yAxis)
drawBars()

zoomer.on('zoom', onZoom)

# ...
graph.call(zoomer)

文章来源: Limiting domain when zooming or panning in D3.js