Commit 1926a889 authored by Mike Bostock's avatar Mike Bostock
Browse files

Remove transform example.

Replaced by <http://bl.ocks.org/1345853>.
parent ea202e32
<!DOCTYPE html>
<meta charset="utf-8">
<title>Transform Transitions</title>
<style>
body {
margin: 0;
}
rect {
stroke: #fff;
stroke-width: .05px;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var width = 960,
height = 500,
z = 20,
x = width / z,
y = height / z;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("rect")
.data(d3.range(x * y))
.enter().append("rect")
.attr("transform", translate)
.attr("width", z)
.attr("height", z)
.style("fill", d3.scale.linear().domain([0, x * y]).range(["brown", "steelblue"]))
.on("mouseover", mouseover);
function translate(d) {
return "translate(" + (d % x) * z + "," + Math.floor(d / x) * z + ")";
}
function mouseover(d) {
this.parentNode.appendChild(this);
d3.select(this).transition()
.duration(750)
.attr("transform", "translate(480,480)scale(23)rotate(180)")
.transition()
.delay(1500)
.attr("transform", "translate(240,240)scale(0)rotate(180)")
.style("fill-opacity", 0)
.remove();
}
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment