Under some circumstances, you might find it necessary to selectively apply transition to a subset of a certain selection. In this recipe, we will explore this effect using data-driven transition filtering techniques.
Open your local copy of the following file in your web browser:
https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/filtering.html
In this recipe, we will move a set of div elements (or boxes) across the web page from right to left. After moving all the boxes to the left, we will selectively move only the boxes that are marked as Cat back, so they won't fight each other. Let's take a look at the following code:
<script type="text/javascript">
var data = ["Cat", "Dog", "Cat", "Dog", "Cat", "Dog", "Cat", "Dog"],
duration = 1500;
d3.select("body").selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class", "fixed...