mirror of
https://github.com/d3/d3.git
synced 2026-01-25 15:24:06 +00:00
3081dd45ef
Rather than producing separate files for each module, the default build now produces a single file. This should encourage better page-load performance as the files were relatively small. Also, it's easier to deal with only one file rather than many, especially if you're not quite sure what the dependencies are. You may still create minimized builds, if you don't want every feature. This commit also demotes the chart components to the examples directory, rather than keeping them as part of the core library. As always, D3 is not a charting library, and these were ever only intended to serve as examples.
61 lines
1.3 KiB
HTML
61 lines
1.3 KiB
HTML
<!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.v2.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>
|