Talk is cheap,show me the code.
http://www.w3school.com.cn/tiy/t.asp?f=html_basic，把下面代碼複製到這個網站上觀看。
做出這個的步驟，
1.先加入svg
2.選中所有矩形，添加矩形。
3.調整矩形的顏色，動作等。
<!DOCTYPE html>
<meta charset="utf-8">
<title>Transform Transitions</title>
<style>
body {
margin: 0;
}
rect {
stroke: #fff;
stroke-width: .1px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var w = 960,
h = 500,
z = 20,
x = w / z,
y = h / z;
var svg=d3.select("body").append("svg");
svg.attr("width",w)
.attr("height",h);
svg.selectAll("rect")
.data(d3.range(x*y))
.enter()
.append("rect")
.attr("width",z)
.attr("height",z)
.attr("transform",trans)
.attr("fill",beautiful)
.on("mouseover",mouseover);
function beautiful(d){
return d3.hsl(Math.floor(360*(d/x)/y),1,0.5);
}
function trans(d){
return "translate("+(d%x)*z+","+Math.floor(d/x)*z+")";
}
function mouseover(d) {
this.parentNode.appendChild(this);
d3.select(this)
.style("pointer-events", "none")
.transition()
.duration(750)
.attr("transform", "translate(480,480)scale(23)rotate(180)")
.transition()
.delay(1500)
.attr("transform", "translate(0,0)scale(100)")
.style("fill-opacity", 0)
.remove();
}
</script>