Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

d3-zoom

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-zoom - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

img/axis.png

12

build/d3-zoom.js

@@ -0,9 +1,8 @@

// https://d3js.org/d3-zoom/ Version 0.3.0. Copyright 2016 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-dispatch'), require('d3-drag'), require('d3-interpolate'), require('d3-selection'), require('d3-transition')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-dispatch', 'd3-drag', 'd3-interpolate', 'd3-selection', 'd3-transition'], factory) :
(factory((global.d3_zoom = global.d3_zoom || {}),global.d3_dispatch,global.d3_drag,global.d3_interpolate,global.d3_selection,global.d3_transition));
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3,global.d3));
}(this, function (exports,d3Dispatch,d3Drag,d3Interpolate,d3Selection,d3Transition) { 'use strict';
var version = "0.2.2";
function constant(x) {

@@ -97,3 +96,3 @@ return function() {

function zoom(started) {
function zoom() {
var filter = defaultFilter,

@@ -109,3 +108,3 @@ extent = defaultExtent,

gestures = [],
listeners = d3Dispatch.dispatch("start", "zoom", "end").on("start", started),
listeners = d3Dispatch.dispatch("start", "zoom", "end"),
mousemoving,

@@ -437,3 +436,2 @@ mousePoint,

exports.version = version;
exports.zoom = zoom;

@@ -443,2 +441,4 @@ exports.zoomTransform = transform;

Object.defineProperty(exports, '__esModule', { value: true });
}));

@@ -1,1 +0,2 @@

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3-dispatch"),require("d3-drag"),require("d3-interpolate"),require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-drag","d3-interpolate","d3-selection","d3-transition"],n):n(t.d3_zoom=t.d3_zoom||{},t.d3_dispatch,t.d3_drag,t.d3_interpolate,t.d3_selection,t.d3_transition)}(this,function(t,n,e,o,i,r){"use strict";function u(t){return function(){return t}}function h(t,n,e){this.target=t,this.type=n,this.transform=e}function s(t,n,e){this.k=t,this.x=n,this.y=e}function c(t){return t.__zoom||y}function a(){i.event.stopImmediatePropagation()}function f(){i.event.preventDefault(),i.event.stopImmediatePropagation()}function l(){return!i.event.button}function p(){var t=this.ownerSVGElement;return[[0,0],t?[t.width.baseVal.value,t.height.baseVal.value]:[this.clientWidth,this.clientHeight]]}function m(){return this.__zoom||y}function d(t){function c(t){t.on("wheel.zoom",k).on("mousedown.zoom",w).on("dblclick.zoom",T).on("touchstart.zoom",M).on("touchmove.zoom",b).on("touchend.zoom touchcancel.zoom",Y).style("-webkit-tap-highlight-color","rgba(0,0,0,0)").property("__zoom",m)}function d(t,n){return n=Math.max(S,Math.min(j,n)),n===t.k?t:new s(n,t.x,t.y)}function v(t,n,e){var o=n[0]-e[0]*t.k,i=n[1]-e[1]*t.k;return o===t.x&&i===t.y?t:new s(t.k,o,i)}function y(t,n){var e=Math.min(0,t.invertX(n[0][0])-G)||Math.max(0,t.invertX(n[1][0])-H),o=Math.min(0,t.invertY(n[0][1])-K)||Math.max(0,t.invertY(n[1][1])-W);return e||o?t.translate(e,o):t}function z(t){return[(+t[0][0]+ +t[1][0])/2,(+t[0][1]+ +t[1][1])/2]}function _(t,n,e){t.on("start.zoom",function(){g(this,arguments).start()}).on("interrupt.zoom end.zoom",function(){g(this,arguments).end()}).tween("zoom",function(){var t=this,i=arguments,r=g(t,i),u=P.apply(t,i),h=e||z(u),c=Math.max(u[1][0]-u[0][0],u[1][1]-u[0][1]),a=t.__zoom,f="function"==typeof n?n.apply(t,i):n,l=o.interpolateZoom(a.invert(h).concat(c/a.k),f.invert(h).concat(c/f.k));return function(t){if(1===t)t=f;else{var n=l(t),e=c/n[2];t=new s(e,h[0]-n[0]*e,h[1]-n[1]*e)}r.zoom(null,t)}})}function g(t,n){for(var e,o=0,i=A.length;i>o;++o)if((e=A[o]).that===t)return e;return new x(t,n)}function x(t,n){this.that=t,this.args=n,this.index=-1,this.active=0}function k(){function t(){B=null,n.end()}if(D.apply(this,arguments)){var n=g(this,arguments),e=this.__zoom,o=Math.max(S,Math.min(j,e.k*Math.pow(2,-i.event.deltaY*(i.event.deltaMode?120:1)/500)));if(B){var u=i.mouse(this);X[0]===u[0]&&X[1]===u[1]||(E=e.invert(X=u)),clearTimeout(B)}else{if(e.k===o)return;n.extent=P.apply(this,arguments),E=e.invert(X=i.mouse(this)),r.interrupt(this),n.start()}f(),B=setTimeout(t,J),n.zoom("mouse",y(v(d(e,o),X,E),n.extent))}}function w(){function t(){f(),q=!0,o.zoom("mouse",y(v(o.that.__zoom,X=i.mouse(o.that),E),o.extent))}function n(){u.on("mousemove.zoom mouseup.zoom",null),e.dragEnable(i.event.view,q),f(),o.end()}if(!V&&D.apply(this,arguments)){var o=g(this,arguments),u=i.select(i.event.view).on("mousemove.zoom",t,!0).on("mouseup.zoom",n,!0);e.dragDisable(i.event.view),a(),q=!1,o.extent=P.apply(this,arguments),E=this.__zoom.invert(X=i.mouse(this)),r.interrupt(this),o.start()}}function T(){if(D.apply(this,arguments)){var t=this.__zoom,n=i.mouse(this),e=t.invert(n),o=t.k*(i.event.shiftKey?.5:2),r=y(v(d(t,o),n,e),P.apply(this,arguments));f(),Z>0?i.select(this).transition().duration(Z).call(_,r,n):i.select(this).call(c.transform,r)}}function M(){if(D.apply(this,arguments)){var t,n,e,o=g(this,arguments),u=i.event.changedTouches,h=u.length;for(a(),t=0;h>t;++t)n=u[t],e=i.touch(this,u,n.identifier),e=[e,this.__zoom.invert(e),n.identifier],o.touch0?o.touch1||(o.touch1=e):o.touch0=e;return I&&(I=clearTimeout(I),!o.touch1)?(o.end(),T.apply(this,arguments)):void(i.event.touches.length===h&&(I=setTimeout(function(){I=null},F),r.interrupt(this),o.extent=P.apply(this,arguments),o.start()))}}function b(){var t,n,e,o,r=g(this,arguments),u=i.event.changedTouches,h=u.length;for(f(),I&&(I=clearTimeout(I)),t=0;h>t;++t)n=u[t],e=i.touch(this,u,n.identifier),r.touch0&&r.touch0[2]===n.identifier?r.touch0[0]=e:r.touch1&&r.touch1[2]===n.identifier&&(r.touch1[0]=e);if(n=r.that.__zoom,r.touch1){var s=r.touch0[0],c=r.touch0[1],a=r.touch1[0],l=r.touch1[1],p=(p=a[0]-s[0])*p+(p=a[1]-s[1])*p,m=(m=l[0]-c[0])*m+(m=l[1]-c[1])*m;n=d(n,Math.sqrt(p/m)),e=[(s[0]+a[0])/2,(s[1]+a[1])/2],o=[(c[0]+l[0])/2,(c[1]+l[1])/2]}else{if(!r.touch0)return;e=r.touch0[0],o=r.touch0[1]}r.zoom("touch",y(v(n,e,o),r.extent))}function Y(){var t,n,e=g(this,arguments),o=i.event.changedTouches,r=o.length;for(a(),V&&clearTimeout(V),V=setTimeout(function(){V=null},F),t=0;r>t;++t)n=o[t],e.touch0&&e.touch0[2]===n.identifier?delete e.touch0:e.touch1&&e.touch1[2]===n.identifier&&delete e.touch1;e.touch1&&!e.touch0&&(e.touch0=e.touch1,delete e.touch1),e.touch0||e.end()}var q,X,E,I,V,B,D=l,P=p,S=0,j=1/0,G=-j,H=j,K=G,W=H,Z=250,A=[],C=n.dispatch("start","zoom","end").on("start",t),F=500,J=150;return c.transform=function(t,n){var e=t.selection?t.selection():t;e.property("__zoom",m),t!==e?_(t,n):e.interrupt().each(function(){g(this,arguments).start().zoom(null,"function"==typeof n?n.apply(this,arguments):n).end()})},c.scaleBy=function(t,n){c.scaleTo(t,function(){var t=this.__zoom.k,e="function"==typeof n?n.apply(this,arguments):n;return t*e})},c.scaleTo=function(t,n){c.transform(t,function(){var t=P.apply(this,arguments),e=this.__zoom,o=z(t),i=e.invert(o),r="function"==typeof n?n.apply(this,arguments):n;return y(v(d(e,r),o,i),t)})},c.translateBy=function(t,n,e){c.transform(t,function(){return y(this.__zoom.translate("function"==typeof n?n.apply(this,arguments):n,"function"==typeof e?e.apply(this,arguments):e),P.apply(this,arguments))})},x.prototype={start:function(){return 1===++this.active&&(this.index=A.push(this)-1,this.emit("start")),this},zoom:function(t,n){return X&&"mouse"!==t&&(E=n.invert(X)),this.touch0&&"touch"!==t&&(this.touch0[1]=n.invert(this.touch0[0])),this.touch1&&"touch"!==t&&(this.touch1[1]=n.invert(this.touch1[0])),this.that.__zoom=n,this.emit("zoom"),this},end:function(){return 0===--this.active&&(A.splice(this.index,1),X=E=null,this.index=-1,this.emit("end")),this},emit:function(t){i.customEvent(new h(c,t,this.that.__zoom),C.apply,C,[t,this.that,this.args])}},c.filter=function(t){return arguments.length?(D="function"==typeof t?t:u(!!t),c):D},c.extent=function(t){return arguments.length?(P="function"==typeof t?t:u([[+t[0][0],+t[0][1]],[+t[1][0],+t[1][1]]]),c):P},c.scaleExtent=function(t){return arguments.length?(S=+t[0],j=+t[1],c):[S,j]},c.translateExtent=function(t){return arguments.length?(G=+t[0][0],H=+t[1][0],K=+t[0][1],W=+t[1][1],c):[[G,K],[H,W]]},c.duration=function(t){return arguments.length?(Z=+t,c):Z},c.on=function(){var t=C.on.apply(C,arguments);return t===C?c:t},c}var v="0.2.2";s.prototype={constructor:s,scale:function(t){return 1===t?this:new s(this.k*t,this.x,this.y)},translate:function(t,n){return 0===t&0===n?this:new s(this.k,this.x+this.k*t,this.y+this.k*n)},apply:function(t){return[t[0]*this.k+this.x,t[1]*this.k+this.y]},applyX:function(t){return t*this.k+this.x},applyY:function(t){return t*this.k+this.y},invert:function(t){return[(t[0]-this.x)/this.k,(t[1]-this.y)/this.k]},invertX:function(t){return(t-this.x)/this.k},invertY:function(t){return(t-this.y)/this.k},rescaleX:function(t){return t.copy().domain(t.range().map(this.invertX,this).map(t.invert,t))},rescaleY:function(t){return t.copy().domain(t.range().map(this.invertY,this).map(t.invert,t))},toString:function(){return"translate("+this.x+","+this.y+") scale("+this.k+")"}};var y=new s(1,0,0);c.prototype=s.prototype,t.version=v,t.zoom=d,t.zoomTransform=c,t.zoomIdentity=y});
// https://d3js.org/d3-zoom/ Version 0.3.0. Copyright 2016 Mike Bostock.
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3-dispatch"),require("d3-drag"),require("d3-interpolate"),require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-drag","d3-interpolate","d3-selection","d3-transition"],n):n(t.d3=t.d3||{},t.d3,t.d3,t.d3,t.d3,t.d3)}(this,function(t,n,e,i,o,r){"use strict";function u(t){return function(){return t}}function h(t,n,e){this.target=t,this.type=n,this.transform=e}function s(t,n,e){this.k=t,this.x=n,this.y=e}function c(t){return t.__zoom||v}function a(){o.event.stopImmediatePropagation()}function f(){o.event.preventDefault(),o.event.stopImmediatePropagation()}function l(){return!o.event.button}function p(){var t=this.ownerSVGElement;return[[0,0],t?[t.width.baseVal.value,t.height.baseVal.value]:[this.clientWidth,this.clientHeight]]}function m(){return this.__zoom||v}function d(){function t(t){t.on("wheel.zoom",g).on("mousedown.zoom",k).on("dblclick.zoom",w).on("touchstart.zoom",M).on("touchmove.zoom",T).on("touchend.zoom touchcancel.zoom",b).style("-webkit-tap-highlight-color","rgba(0,0,0,0)").property("__zoom",m)}function c(t,n){return n=Math.max(B,Math.min(D,n)),n===t.k?t:new s(n,t.x,t.y)}function d(t,n,e){var i=n[0]-e[0]*t.k,o=n[1]-e[1]*t.k;return i===t.x&&o===t.y?t:new s(t.k,i,o)}function v(t,n){var e=Math.min(0,t.invertX(n[0][0])-S)||Math.max(0,t.invertX(n[1][0])-G),i=Math.min(0,t.invertY(n[0][1])-H)||Math.max(0,t.invertY(n[1][1])-K);return e||i?t.translate(e,i):t}function y(t){return[(+t[0][0]+ +t[1][0])/2,(+t[0][1]+ +t[1][1])/2]}function z(t,n,e){t.on("start.zoom",function(){_(this,arguments).start()}).on("interrupt.zoom end.zoom",function(){_(this,arguments).end()}).tween("zoom",function(){var t=this,o=arguments,r=_(t,o),u=j.apply(t,o),h=e||y(u),c=Math.max(u[1][0]-u[0][0],u[1][1]-u[0][1]),a=t.__zoom,f="function"==typeof n?n.apply(t,o):n,l=i.interpolateZoom(a.invert(h).concat(c/a.k),f.invert(h).concat(c/f.k));return function(t){if(1===t)t=f;else{var n=l(t),e=c/n[2];t=new s(e,h[0]-n[0]*e,h[1]-n[1]*e)}r.zoom(null,t)}})}function _(t,n){for(var e,i=0,o=W.length;o>i;++i)if((e=W[i]).that===t)return e;return new x(t,n)}function x(t,n){this.that=t,this.args=n,this.index=-1,this.active=0}function g(){function t(){P=null,n.end()}if(V.apply(this,arguments)){var n=_(this,arguments),e=this.__zoom,i=Math.max(B,Math.min(D,e.k*Math.pow(2,-o.event.deltaY*(o.event.deltaMode?120:1)/500)));if(P){var u=o.mouse(this);q[0]===u[0]&&q[1]===u[1]||(X=e.invert(q=u)),clearTimeout(P)}else{if(e.k===i)return;n.extent=j.apply(this,arguments),X=e.invert(q=o.mouse(this)),r.interrupt(this),n.start()}f(),P=setTimeout(t,C),n.zoom("mouse",v(d(c(e,i),q,X),n.extent))}}function k(){function t(){f(),Y=!0,i.zoom("mouse",v(d(i.that.__zoom,q=o.mouse(i.that),X),i.extent))}function n(){u.on("mousemove.zoom mouseup.zoom",null),e.dragEnable(o.event.view,Y),f(),i.end()}if(!I&&V.apply(this,arguments)){var i=_(this,arguments),u=o.select(o.event.view).on("mousemove.zoom",t,!0).on("mouseup.zoom",n,!0);e.dragDisable(o.event.view),a(),Y=!1,i.extent=j.apply(this,arguments),X=this.__zoom.invert(q=o.mouse(this)),r.interrupt(this),i.start()}}function w(){if(V.apply(this,arguments)){var n=this.__zoom,e=o.mouse(this),i=n.invert(e),r=n.k*(o.event.shiftKey?.5:2),u=v(d(c(n,r),e,i),j.apply(this,arguments));f(),O>0?o.select(this).transition().duration(O).call(z,u,e):o.select(this).call(t.transform,u)}}function M(){if(V.apply(this,arguments)){var t,n,e,i=_(this,arguments),u=o.event.changedTouches,h=u.length;for(a(),t=0;h>t;++t)n=u[t],e=o.touch(this,u,n.identifier),e=[e,this.__zoom.invert(e),n.identifier],i.touch0?i.touch1||(i.touch1=e):i.touch0=e;return E&&(E=clearTimeout(E),!i.touch1)?(i.end(),w.apply(this,arguments)):void(o.event.touches.length===h&&(E=setTimeout(function(){E=null},A),r.interrupt(this),i.extent=j.apply(this,arguments),i.start()))}}function T(){var t,n,e,i,r=_(this,arguments),u=o.event.changedTouches,h=u.length;for(f(),E&&(E=clearTimeout(E)),t=0;h>t;++t)n=u[t],e=o.touch(this,u,n.identifier),r.touch0&&r.touch0[2]===n.identifier?r.touch0[0]=e:r.touch1&&r.touch1[2]===n.identifier&&(r.touch1[0]=e);if(n=r.that.__zoom,r.touch1){var s=r.touch0[0],a=r.touch0[1],l=r.touch1[0],p=r.touch1[1],m=(m=l[0]-s[0])*m+(m=l[1]-s[1])*m,y=(y=p[0]-a[0])*y+(y=p[1]-a[1])*y;n=c(n,Math.sqrt(m/y)),e=[(s[0]+l[0])/2,(s[1]+l[1])/2],i=[(a[0]+p[0])/2,(a[1]+p[1])/2]}else{if(!r.touch0)return;e=r.touch0[0],i=r.touch0[1]}r.zoom("touch",v(d(n,e,i),r.extent))}function b(){var t,n,e=_(this,arguments),i=o.event.changedTouches,r=i.length;for(a(),I&&clearTimeout(I),I=setTimeout(function(){I=null},A),t=0;r>t;++t)n=i[t],e.touch0&&e.touch0[2]===n.identifier?delete e.touch0:e.touch1&&e.touch1[2]===n.identifier&&delete e.touch1;e.touch1&&!e.touch0&&(e.touch0=e.touch1,delete e.touch1),e.touch0||e.end()}var Y,q,X,E,I,P,V=l,j=p,B=0,D=1/0,S=-D,G=D,H=S,K=G,O=250,W=[],Z=n.dispatch("start","zoom","end"),A=500,C=150;return t.transform=function(t,n){var e=t.selection?t.selection():t;e.property("__zoom",m),t!==e?z(t,n):e.interrupt().each(function(){_(this,arguments).start().zoom(null,"function"==typeof n?n.apply(this,arguments):n).end()})},t.scaleBy=function(n,e){t.scaleTo(n,function(){var t=this.__zoom.k,n="function"==typeof e?e.apply(this,arguments):e;return t*n})},t.scaleTo=function(n,e){t.transform(n,function(){var t=j.apply(this,arguments),n=this.__zoom,i=y(t),o=n.invert(i),r="function"==typeof e?e.apply(this,arguments):e;return v(d(c(n,r),i,o),t)})},t.translateBy=function(n,e,i){t.transform(n,function(){return v(this.__zoom.translate("function"==typeof e?e.apply(this,arguments):e,"function"==typeof i?i.apply(this,arguments):i),j.apply(this,arguments))})},x.prototype={start:function(){return 1===++this.active&&(this.index=W.push(this)-1,this.emit("start")),this},zoom:function(t,n){return q&&"mouse"!==t&&(X=n.invert(q)),this.touch0&&"touch"!==t&&(this.touch0[1]=n.invert(this.touch0[0])),this.touch1&&"touch"!==t&&(this.touch1[1]=n.invert(this.touch1[0])),this.that.__zoom=n,this.emit("zoom"),this},end:function(){return 0===--this.active&&(W.splice(this.index,1),q=X=null,this.index=-1,this.emit("end")),this},emit:function(n){o.customEvent(new h(t,n,this.that.__zoom),Z.apply,Z,[n,this.that,this.args])}},t.filter=function(n){return arguments.length?(V="function"==typeof n?n:u(!!n),t):V},t.extent=function(n){return arguments.length?(j="function"==typeof n?n:u([[+n[0][0],+n[0][1]],[+n[1][0],+n[1][1]]]),t):j},t.scaleExtent=function(n){return arguments.length?(B=+n[0],D=+n[1],t):[B,D]},t.translateExtent=function(n){return arguments.length?(S=+n[0][0],G=+n[1][0],H=+n[0][1],K=+n[1][1],t):[[S,H],[G,K]]},t.duration=function(n){return arguments.length?(O=+n,t):O},t.on=function(){var n=Z.on.apply(Z,arguments);return n===Z?t:n},t}s.prototype={constructor:s,scale:function(t){return 1===t?this:new s(this.k*t,this.x,this.y)},translate:function(t,n){return 0===t&0===n?this:new s(this.k,this.x+this.k*t,this.y+this.k*n)},apply:function(t){return[t[0]*this.k+this.x,t[1]*this.k+this.y]},applyX:function(t){return t*this.k+this.x},applyY:function(t){return t*this.k+this.y},invert:function(t){return[(t[0]-this.x)/this.k,(t[1]-this.y)/this.k]},invertX:function(t){return(t-this.x)/this.k},invertY:function(t){return(t-this.y)/this.k},rescaleX:function(t){return t.copy().domain(t.range().map(this.invertX,this).map(t.invert,t))},rescaleY:function(t){return t.copy().domain(t.range().map(this.invertY,this).map(t.invert,t))},toString:function(){return"translate("+this.x+","+this.y+") scale("+this.k+")"}};var v=new s(1,0,0);c.prototype=s.prototype,t.zoom=d,t.zoomTransform=c,t.zoomIdentity=v,Object.defineProperty(t,"__esModule",{value:!0})});

@@ -1,3 +0,2 @@

export {version} from "./build/package";
export {default as zoom} from "./src/zoom";
export {default as zoomTransform, identity as zoomIdentity} from "./src/transform";
{
"name": "d3-zoom",
"version": "0.2.2",
"version": "0.3.0",
"description": "Pan and zoom SVG, HTML or Canvas using mouse or touch input.",

@@ -11,3 +11,3 @@ "keywords": [

],
"homepage": "https://github.com/d3/d3-zoom",
"homepage": "https://d3js.org/d3-zoom/",
"license": "BSD-3-Clause",

@@ -25,18 +25,18 @@ "author": {

"scripts": {
"pretest": "rm -rf build && mkdir build && json2module package.json > build/package.js && rollup -g d3-dispatch:d3_dispatch,d3-drag:d3_drag,d3-interpolate:d3_interpolate,d3-selection:d3_selection,d3-transition:d3_transition -f umd -n d3_zoom -o build/d3-zoom.js -- index.js",
"pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -g d3-dispatch:d3,d3-drag:d3,d3-interpolate:d3,d3-selection:d3,d3-transition:d3 -f umd -n d3 -o build/d3-zoom.js -- index.js",
"test": "tape 'test/**/*-test.js' && eslint index.js src",
"prepublish": "npm run test && uglifyjs build/d3-zoom.js -c -m -o build/d3-zoom.min.js",
"postpublish": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-zoom.js ../d3.github.com/d3-zoom.v0.2.js && cp build/d3-zoom.min.js ../d3.github.com/d3-zoom.v0.2.min.js && cd ../d3.github.com && git add d3-zoom.v0.2.js d3-zoom.v0.2.min.js && git commit -m \"d3-zoom ${VERSION}\" && git push && cd - && zip -j build/d3-zoom.zip -- LICENSE README.md build/d3-zoom.js build/d3-zoom.min.js"
"prepublish": "npm run test && uglifyjs --preamble \"$(preamble)\" build/d3-zoom.js -c -m -o build/d3-zoom.min.js",
"postpublish": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-zoom.js ../d3.github.com/d3-zoom.v0.3.js && cp build/d3-zoom.min.js ../d3.github.com/d3-zoom.v0.3.min.js && cd ../d3.github.com && git add d3-zoom.v0.3.js d3-zoom.v0.3.min.js && git commit -m \"d3-zoom ${VERSION}\" && git push && cd - && zip -j build/d3-zoom.zip -- LICENSE README.md build/d3-zoom.js build/d3-zoom.min.js"
},
"dependencies": {
"d3-dispatch": "~0.4.3",
"d3-drag": "~0.2.0",
"d3-interpolate": "~0.8.0",
"d3-selection": "~0.7.2",
"d3-transition": "~0.2.8"
"d3-dispatch": "~0.5.0",
"d3-drag": "~0.3.0",
"d3-interpolate": "~0.9.0",
"d3-selection": "~0.8.0",
"d3-transition": "~0.3.0"
},
"devDependencies": {
"eslint": "2",
"json2module": "0.0",
"rollup": "0.26",
"package-preamble": "0.0",
"rollup": "0.27",
"tape": "4",

@@ -43,0 +43,0 @@ "uglify-js": "2"

# d3-zoom
Pan and zoom SVG, HTML or Canvas using mouse or touch input.
Panning and zooming are popular interaction techniques which let the user focus on a region of interest by restricting the view. It is easy to learn due to direct manipulation: click-and-drag to pan (translate), spin the wheel to zoom (scale), or use touch. Panning and zooming are widely used in web-based mapping, but can also be used with visualizations such as time-series and scatterplots.
The zoom behavior implemented by d3-zoom is a convenient but flexible abstraction for enabling pan-and-zoom on [selections](https://github.com/d3/d3-selection). It handles a surprising variety of [input events](#api-reference ) and browser quirks. The zoom behavior is agnostic about the DOM, so you can use it with SVG, HTML or Canvas.
[<img alt="Canvas Zooming" src="https://raw.githubusercontent.com/d3/d3-zoom/master/img/dots.png" width="420" height="219">](http://bl.ocks.org/mbostock/d1f7b58631e71fbf9c568345ee04a60e)[<img alt="SVG Zooming" src="https://raw.githubusercontent.com/d3/d3-zoom/master/img/dots.png" width="420" height="219">](http://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45)
The zoom behavior is also designed to work with [d3-scale](https://github.com/d3/d3-scale) and [d3-axis](https://github.com/d3/d3-axis); see [*transform*.rescaleX](#transform_rescaleX) and [*transform*.rescaleY](#transform_rescaleY). You can also restrict zooming using [*zoom*.scaleExtent](#zoom_scaleExtent) and panning using [*zoom*.translateExtent](#zoom_translateExtent).
[<img alt="Axis Zooming" src="https://raw.githubusercontent.com/d3/d3-zoom/master/img/axis.png" width="420" height="219">](http://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f)
The zoom behavior can be controlled programmatically using [*zoom*.transform](#zoom_transform), allowing you to implement user interface controls which drive the display or to stage animated tours through your data. Smooth zoom transitions are based on [“Smooth and efficient zooming and panning”](http://www.win.tue.nl/~vanwijk/zoompan.pdf) by Jarke J. van Wijk and Wim A.A. Nuij.
[<img alt="Zoom Transitions" src="https://raw.githubusercontent.com/d3/d3-zoom/master/img/transition.png" width="420" height="219">](http://bl.ocks.org/mbostock/b783fbb2e673561d214e09c7fb5cedee)
## Installing
If you use NPM, `npm install d3-zoom`. Otherwise, download the [latest release](https://github.com/d3/d3-zoom/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-zoom.v0.2.min.js) or as part of [D3 4.0](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3_zoom` global is exported:
If you use NPM, `npm install d3-zoom`. Otherwise, download the [latest release](https://github.com/d3/d3-zoom/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-zoom.v0.3.min.js) or as part of [D3 4.0](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
```html
<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.8.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.2.min.js"></script>
<script src="https://d3js.org/d3-drag.v0.2.min.js"></script>
<script src="https://d3js.org/d3-zoom.v0.2.min.js"></script>
<script src="https://d3js.org/d3-color.v0.5.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.5.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.8.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.9.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.8.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.5.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.3.min.js"></script>
<script src="https://d3js.org/d3-drag.v0.3.min.js"></script>
<script src="https://d3js.org/d3-zoom.v0.3.min.js"></script>
<script>
var zoom = d3_zoom.zoom();
var zoom = d3.zoom();

@@ -23,0 +35,0 @@ </script>

@@ -27,3 +27,3 @@ import {dispatch} from "d3-dispatch";

export default function(started) {
export default function() {
var filter = defaultFilter,

@@ -39,3 +39,3 @@ extent = defaultExtent,

gestures = [],
listeners = dispatch("start", "zoom", "end").on("start", started),
listeners = dispatch("start", "zoom", "end"),
mousemoving,

@@ -42,0 +42,0 @@ mousePoint,

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc