mirror of
https://github.com/d3/d3.git
synced 2026-01-25 15:24:06 +00:00
57 lines
1.1 KiB
HTML
57 lines
1.1 KiB
HTML
<!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>
|