mbostock/d3 — Issue #399: union selections?
Author: mbostock
Created: 2011-12-07 20:46:09+00:00
State: open
Labels: req

I wonder if it would be useful to union selections (or transitions). For example, say you have a barUpdate transition, and another barExit transition. What if you want to apply the same operations to both? Sure, you could extract that code out into a separate function and call it explicitly:

```javascript
var barUpdate = transition(bar)
.attr("transform", function(d) { return "translate(0," + y(d.State) + ")"; })
.style("fill-opacity", 1)
.call(update);

barUpdate.select("text")
.text(function(d) { return format(d[age]); });

var barExit = transition(bar.exit())
.style("fill-opacity", 0)
.remove()
.call(update);

function update(bar) {
bar.select("rect").attr("width", function(d) { return x(d[age]); });
bar.select("text").attr("x", function(d) { return x(d[age]) - 3; });
}
```

But if you could union them, you could just restructure the code slightly:

```javascript
var barUpdate = transition(bar)
.attr("transform", function(d) { return "translate(0," + y(d.State) + ")"; })
.style("fill-opacity", 1);

barUpdate.select("text")
.text(function(d) { return format(d[age]); });

var barExit = transition(bar.exit())
.style("fill-opacity", 0)
.remove();

var barAll = barUpdate.union(barExit);

barAll.select("rect")
.attr("width", function(d) { return x(d[age]); });

barAll.select("text")
.attr("x", function(d) { return x(d[age]) - 3; });
```