Skip to content

Commit 94168fa

Browse files
mbostockmbostock
committed
Double-tap zoom transition.
1 parent 2dc5105 commit 94168fa

4 files changed

Lines changed: 46 additions & 40 deletions

File tree

‎d3.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1008,8 +1008,8 @@
10081008
if (lock) ++lock.active;
10091009
});
10101010
};
1011-
function d3_selection_interrupt() {
1012-
var lock = this.__transition__;
1011+
function d3_selection_interrupt(that) {
1012+
var lock = that.__transition__;
10131013
if (lock) ++lock.active;
10141014
}
10151015
d3.select = function(node) {
@@ -1375,6 +1375,16 @@
13751375
view.x += p[0] - l[0];
13761376
view.y += p[1] - l[1];
13771377
}
1378+
function zoomTo(that, p, l, k) {
1379+
that.__chart__ = {
1380+
x: view.x,
1381+
y: view.y,
1382+
k: view.k
1383+
};
1384+
scaleTo(Math.pow(2, k));
1385+
translateTo(center0 = p, l);
1386+
d3.select(that).transition().duration(350).call(zoom.event);
1387+
}
13781388
function rescale() {
13791389
if (x1) x1.domain(x0.range().map(function(x) {
13801390
return (x - view.x) / view.k;
@@ -1404,7 +1414,7 @@
14041414
}
14051415
function mousedowned() {
14061416
var that = this, target = d3.event.target, dispatch = event.of(that, arguments), dragged = 0, subject = d3.select(d3_window).on(mousemove, moved).on(mouseup, ended), location0 = location(d3.mouse(that)), dragRestore = d3_event_dragSuppress();
1407-
d3_selection_interrupt.call(that);
1417+
d3_selection_interrupt(that);
14081418
zoomstarted(dispatch);
14091419
function moved() {
14101420
dragged = 1;
@@ -1419,7 +1429,6 @@
14191429
}
14201430
function touchstarted() {
14211431
var that = this, dispatch = event.of(that, arguments), locations0 = {}, distance0 = 0, scale0, zoomName = ".zoom-" + d3.event.changedTouches[0].identifier, touchmove = "touchmove" + zoomName, touchend = "touchend" + zoomName, targets = [], subject = d3.select(that), dragRestore = d3_event_dragSuppress();
1422-
d3_selection_interrupt.call(that);
14231432
started();
14241433
zoomstarted(dispatch);
14251434
subject.on(mousedown, null).on(touchstart, started);
@@ -1442,11 +1451,9 @@
14421451
var touches = relocate(), now = Date.now();
14431452
if (touches.length === 1) {
14441453
if (now - touchtime < 500) {
1445-
var p = touches[0], l = locations0[p.identifier];
1446-
scaleTo(view.k * 2);
1447-
translateTo(p, l);
1454+
var p = touches[0];
1455+
zoomTo(that, p, locations0[p.identifier], Math.floor(Math.log(view.k) / Math.LN2) + 1);
14481456
d3_eventPreventDefault();
1449-
zoomed(dispatch);
14501457
}
14511458
touchtime = now;
14521459
} else if (touches.length > 1) {
@@ -1456,6 +1463,7 @@
14561463
}
14571464
function moved() {
14581465
var touches = d3.touches(that), p0, l0, p1, l1;
1466+
d3_selection_interrupt(that);
14591467
for (var i = 0, n = touches.length; i < n; ++i, l1 = null) {
14601468
p1 = touches[i];
14611469
if (l1 = locations0[p1.identifier]) {
@@ -1492,7 +1500,7 @@
14921500
function mousewheeled() {
14931501
var dispatch = event.of(this, arguments);
14941502
if (mousewheelTimer) clearTimeout(mousewheelTimer); else translate0 = location(center0 = center || d3.mouse(this)),
1495-
d3_selection_interrupt.call(this), zoomstarted(dispatch);
1503+
d3_selection_interrupt(this), zoomstarted(dispatch);
14961504
mousewheelTimer = setTimeout(function() {
14971505
mousewheelTimer = null;
14981506
zoomended(dispatch);
@@ -1503,15 +1511,8 @@
15031511
zoomed(dispatch);
15041512
}
15051513
function dblclicked() {
1506-
var l = location(center0 = d3.mouse(this)), k = Math.log(view.k) / Math.LN2;
1507-
this.__chart__ = {
1508-
x: view.x,
1509-
y: view.y,
1510-
k: view.k
1511-
};
1512-
scaleTo(Math.pow(2, d3.event.shiftKey ? Math.ceil(k) - 1 : Math.floor(k) + 1));
1513-
translateTo(center0, l);
1514-
d3.select(this).transition().duration(350).call(zoom.event);
1514+
var p = d3.mouse(this), k = Math.log(view.k) / Math.LN2;
1515+
zoomTo(this, p, location(p), d3.event.shiftKey ? Math.ceil(k) - 1 : Math.floor(k) + 1);
15151516
}
15161517
return d3.rebind(zoom, event, "on");
15171518
};

‎d3.min.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/behavior/zoom.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,17 @@ d3.behavior.zoom = function() {
141141
view.y += p[1] - l[1];
142142
}
143143

144+
function zoomTo(that, p, l, k) {
145+
that.__chart__ = {x: view.x, y: view.y, k: view.k};
146+
147+
scaleTo(Math.pow(2, k));
148+
translateTo(center0 = p, l);
149+
150+
d3.select(that).transition()
151+
.duration(350) // TODO allow this to be customized?
152+
.call(zoom.event);
153+
}
154+
144155
function rescale() {
145156
if (x1) x1.domain(x0.range().map(function(x) { return (x - view.x) / view.k; }).map(x0.invert));
146157
if (y1) y1.domain(y0.range().map(function(y) { return (y - view.y) / view.k; }).map(y0.invert));
@@ -169,7 +180,7 @@ d3.behavior.zoom = function() {
169180
location0 = location(d3.mouse(that)),
170181
dragRestore = d3_event_dragSuppress();
171182

172-
d3_selection_interrupt.call(that);
183+
d3_selection_interrupt(that);
173184
zoomstarted(dispatch);
174185

175186
function moved() {
@@ -199,7 +210,6 @@ d3.behavior.zoom = function() {
199210
subject = d3.select(that),
200211
dragRestore = d3_event_dragSuppress();
201212

202-
d3_selection_interrupt.call(that);
203213
started();
204214
zoomstarted(dispatch);
205215

@@ -236,11 +246,9 @@ d3.behavior.zoom = function() {
236246

237247
if (touches.length === 1) {
238248
if (now - touchtime < 500) { // dbltap
239-
var p = touches[0], l = locations0[p.identifier];
240-
scaleTo(view.k * 2);
241-
translateTo(p, l);
249+
var p = touches[0];
250+
zoomTo(that, p, locations0[p.identifier], Math.floor(Math.log(view.k) / Math.LN2) + 1);
242251
d3_eventPreventDefault();
243-
zoomed(dispatch);
244252
}
245253
touchtime = now;
246254
} else if (touches.length > 1) {
@@ -254,6 +262,9 @@ d3.behavior.zoom = function() {
254262
var touches = d3.touches(that),
255263
p0, l0,
256264
p1, l1;
265+
266+
d3_selection_interrupt(that);
267+
257268
for (var i = 0, n = touches.length; i < n; ++i, l1 = null) {
258269
p1 = touches[i];
259270
if (l1 = locations0[p1.identifier]) {
@@ -300,7 +311,7 @@ d3.behavior.zoom = function() {
300311
function mousewheeled() {
301312
var dispatch = event.of(this, arguments);
302313
if (mousewheelTimer) clearTimeout(mousewheelTimer);
303-
else translate0 = location(center0 = center || d3.mouse(this)), d3_selection_interrupt.call(this), zoomstarted(dispatch);
314+
else translate0 = location(center0 = center || d3.mouse(this)), d3_selection_interrupt(this), zoomstarted(dispatch);
304315
mousewheelTimer = setTimeout(function() { mousewheelTimer = null; zoomended(dispatch); }, 50);
305316
d3_eventPreventDefault();
306317
scaleTo(Math.pow(2, d3_behavior_zoomDelta() * .002) * view.k);
@@ -309,16 +320,10 @@ d3.behavior.zoom = function() {
309320
}
310321

311322
function dblclicked() {
312-
var l = location(center0 = d3.mouse(this)),
323+
var p = d3.mouse(this),
313324
k = Math.log(view.k) / Math.LN2;
314325

315-
this.__chart__ = {x: view.x, y: view.y, k: view.k};
316-
scaleTo(Math.pow(2, d3.event.shiftKey ? Math.ceil(k) - 1 : Math.floor(k) + 1));
317-
translateTo(center0, l);
318-
319-
d3.select(this).transition()
320-
.duration(350) // TODO allow this to be customized?
321-
.call(zoom.event);
326+
zoomTo(this, p, location(p), d3.event.shiftKey ? Math.ceil(k) - 1 : Math.floor(k) + 1);
322327
}
323328

324329
return d3.rebind(zoom, event, "on");

‎src/selection/interrupt.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ d3_selectionPrototype.interrupt = function(name) {
1010
});
1111
};
1212

13-
function d3_selection_interrupt() {
14-
var lock = this.__transition__;
13+
function d3_selection_interrupt(that) {
14+
var lock = that.__transition__;
1515
if (lock) ++lock.active;
1616
}

0 commit comments

Comments
 (0)