Sha256: ca97d5c619a8500c4eadcd280d8f73fd680224434eb815876aa795e82270dcf3
Contents?: true
Size: 1.25 KB
Versions: 25
Compression:
Stored size: 1.25 KB
Contents
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Transform Transitions</title>
<script type="text/javascript" src="../../d3.js"></script>
<style type="text/css">
body {
margin: 0;
}
rect {
stroke: #fff;
stroke-width: .05px;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h = 500,
z = 20,
x = w / z,
y = h / z;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
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>
</body>
</html>
Version data entries
25 entries across 25 versions & 1 rubygems