Родитель
ea202e32e0
Коммит
1926a8890a
|
@ -1,56 +0,0 @@
|
|||
<!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>
|
Загрузка…
Ссылка в новой задаче