我实现了一个简单的 D3.js 折线图，可以缩放和平移。它基于 Stephen Bannasch 的优秀示例here.
我的数据域是 x 维度中的 [0, n]。
如何使用内置缩放行为（即使用鼠标滚轮事件）将缩放和平移限制到此域？
我想防止用户在下端平移超过 0 或在上端平移超过 n，例如，他们永远不能看到 x 轴上的负值，并且希望将缩放限制到同一窗口。
我发现的基于 Jason Davies 使用范围（ [...],[...],[...] ） 的示例似乎不再适用于版本 2.9.1。不幸的是，缩放行为目前是少数未记录在其他出色的 API 文档中的功能之一。
欢迎任何指点。
PS. 我在 D3.js 邮件列表上发布了同样的问题，但没有得到回复：https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion。对于交叉发布表示歉意。
遗憾的是，比尔发布的解决方案只成功了一半：虽然它确实抑制了平移，但如果应用缩放，它会导致图形扭曲。那么通常不可能返回到正确比例和定位的图表。
在以下版本中，即使滚动到边框，轴的比例也会保持不变。
一旦缩放达到 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)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
