缩放

优质
小牛编辑
130浏览
2023-12-01

该行为会自动在容器元素中创建事件监听器来处理元素的缩放和平移动作,可支持鼠标事件和触摸事件。

d3.behavior.zoom()

构造一个新的缩放行为。

zoom(selection)

应用缩放行为到指定的选择器selection,注册所需的事件监听器,支持缩放和拖拽行为。

zoom.translate([translate])

指定当前的缩放平移向量为translate;如果未指定translate,返回当前平移向量,默认:[0, 0]。

zoom.scale([scale])

指定当前的缩放比例,如果未指定scale,则返回当前的缩放比例,默认为1。

zoom.scaleExtent([extent])

指定缩放比例的允许范围为一个包含两个数值元素的数组,[minimum, maximum];如果未指定extent,则返回当前的比例范围,默认为:[0, Infinity]。

zoom.center([center])

如果指定了center ,为鼠标滚轮设置缩放的焦点(focal point [x, y])为center ,并返回当前的缩放行为对象;如果未指定center ,则返回当前的缩放焦点,默认为null;一个为null的缩放焦点即:是以当前鼠标指针为缩放焦点。

zoom.size([size])

如果指定了size,设置视窗大小为指定的尺寸size([width, height]),并返回当前的缩放行为对象;如果未指定size,返回当前的视窗大小,默认为:[960, 500];size是支持在平移时平滑的进行缩放行为。

zoom.x([x])

指定x比例,并且它的定义域会在缩放时自动调整;如果未指定[x],返回当前的x缩放,默认为null;如果缩放的定义域或范围是通过函数修改的,则这个函数应该被再次调用。设置x比例,并重置缩放比例为1,平移为[0, 0]。

zoom.y([y])

指定y比例,并且它的定义域会在缩放时自动调整;如果未指定[y],返回当前的y缩放,默认为null;如果缩放的定义域或范围是通过函数修改的,则这个函数应该被再次调用,设置y比例,并重置缩放比例为1,平移为[0, 0]。

zoom.on(type, listener)

注册监听器listener来接收指定事件类型type的缩放行为;支持的事件类型有:
zoomstart - 缩放开始时 (e.g., touchstart);
zoom - 缩放行为发生时 (e.g., touchmove);
zoomend - 缩放行为结束时 (e.g., touchend);
如果相同的事件类型已经指定了监听器,则首先会移除老的监听器,在加入新的监听器;要给一个事件类型注册多个监听器,则可以使用事件类型加命名空间后缀的形式,如:"zoom.foo" 和 "zoom.bar";想要移除监听器,只需要传入null即可;
对于鼠标滚轮事件,针对浏览器而言是没有明确的结束和开始通知的,在50毫秒内的多个事件会被分组到单个缩放中;如果想要更好的处理该种滚轮类型,请参考您的浏览器厂商,来获得更好的支持;
事件发生时,d3.event中会包含以下属性:
scale - 一个数值,即当前的比例;
translate - 一个含有两个数值元素的数组,代表平移向量。

zoom.event(selection)

如果selection是一个选择器,立刻给注册的监听器分派一个缩放动作,作为三个时间序列:zoomstart,zoom 和 zoomend;这可以在设置了平移或比例后立刻触发监听器;如果selection是一个平移(transition),注册适当补间,使得缩放行为在过渡的过程中分派事件:zoomstart 事件发生在此前设定的视图平移开始时,zoom 事件则时刻发生在平移transition中,zoomend 事件则发生在平移transition结束时;注意:如果用户开始一个新的缩放行为前,之前的缩放行为动画会被立刻中断。