Skip to content

Commit 76d52a2

Browse files
mbostockmbostock
committed
Add brush transitions. Fixes d3#1385.
However, since the new extent is set to trigger the transition, this does not provide interpolation of the extent in data-space, making it somewhat cumbersome to perform live brush intersection during the transition.
1 parent e7e6c3a commit 76d52a2

3 files changed

Lines changed: 44 additions & 34 deletions

File tree

‎d3.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7923,11 +7923,13 @@ d3 = function() {
79237923
var event = d3_eventDispatch(brush, "brushstart", "brush", "brushend"), x = null, y = null, resizes = d3_svg_brushResizes[0], extent = [ [ 0, 0 ], [ 0, 0 ] ], clamp = [ true, true ], extentDomain;
79247924
function brush(g) {
79257925
g.each(function() {
7926-
var g = d3.select(this), bg = g.selectAll(".background").data([ 0 ]), fg = g.selectAll(".extent").data([ 0 ]), tz = g.selectAll(".resize").data(resizes, String), e;
7927-
g.style("pointer-events", "all").on("mousedown.brush", brushstart).on("touchstart.brush", brushstart);
7928-
bg.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("cursor", "crosshair");
7929-
fg.enter().append("rect").attr("class", "extent").style("cursor", "move");
7930-
tz.enter().append("g").attr("class", function(d) {
7926+
var g = d3.select(this).style("pointer-events", "all").on("mousedown.brush", brushstart).on("touchstart.brush", brushstart);
7927+
var background = g.selectAll(".background").data([ 0 ]);
7928+
background.enter().append("rect").attr("class", "background").style("visibility", "hidden").style("cursor", "crosshair");
7929+
g.selectAll(".extent").data([ 0 ]).enter().append("rect").attr("class", "extent").style("cursor", "move");
7930+
var resize = g.selectAll(".resize").data(resizes, String);
7931+
resize.exit().remove();
7932+
resize.enter().append("g").attr("class", function(d) {
79317933
return "resize " + d;
79327934
}).style("cursor", function(d) {
79337935
return d3_svg_brushCursor[d];
@@ -7936,19 +7938,19 @@ d3 = function() {
79367938
}).attr("y", function(d) {
79377939
return /^[ns]/.test(d) ? -3 : null;
79387940
}).attr("width", 6).attr("height", 6).style("visibility", "hidden");
7939-
tz.style("display", brush.empty() ? "none" : null);
7940-
tz.exit().remove();
7941+
resize.style("display", brush.empty() ? "none" : null);
7942+
var gUpdate = d3.transition(g), backgroundUpdate = d3.transition(background), range;
79417943
if (x) {
7942-
e = d3_scaleRange(x);
7943-
bg.attr("x", e[0]).attr("width", e[1] - e[0]);
7944-
redrawX(g);
7944+
range = d3_scaleRange(x);
7945+
backgroundUpdate.attr("x", range[0]).attr("width", range[1] - range[0]);
7946+
redrawX(gUpdate);
79457947
}
79467948
if (y) {
7947-
e = d3_scaleRange(y);
7948-
bg.attr("y", e[0]).attr("height", e[1] - e[0]);
7949-
redrawY(g);
7949+
range = d3_scaleRange(y);
7950+
backgroundUpdate.attr("y", range[0]).attr("height", range[1] - range[0]);
7951+
redrawY(gUpdate);
79507952
}
7951-
redraw(g);
7953+
redraw(gUpdate);
79527954
});
79537955
}
79547956
function redraw(g) {

0 commit comments

Comments
 (0)