arielgk
3/3/2015 - 1:22 AM
.project
function main() {
var svg = d3.select("#vis").append("svg")
.attr("width", 800)
.attr("height", 600);
var points1a =
[
"M 0 0",
"L 100 0",
"L 100 100",
"L 0 100",
"z"
];
var points1b =
[
"M 0 0",
"L 200 0",
"L 150 100",
"L 50 100",
"z"
];
var points1c =
[
"M 0 0",
"L 200 0",
"L 150 100",
"L 100 200",
"L 50 100",
"z"
];
var points1d =
[
"M 0 0",
"L 100 0",
"L 100 100",
"L 50 100", //redundant point, but means there is a one for one mappting to points 1c
"L 0 100",
"z"
];
svg
.append("g")
.attr("transform","translate(0,20)")
.append("text")
.text("click me")
.on("contextmenu", click);
var path1 = svg
.append("g")
.attr("transform","translate(0,50)")
.append("path")
.attr("d",points1a.join(" "));
var path2 = svg
.append("g")
.attr("transform","translate(200,50)")
.append("path")
.attr("d",points1a.join(" "));
var path3 = svg
.append("g")
.attr("transform","translate(400,50)")
.append("path")
.attr("d",points1d.join(" "));
function click(d){
var a = this;
var b = d;
d3.event.preventDefault();
path1
.transition()
.duration(2000)
.attr("d",points1b.join(" "));
path2
.transition()
.delay(2000)
.duration(2000)
.attr("d",points1c.join(" "));
path3
.transition()
.delay(4000)
.duration(2000)
.attr("d",points1c.join(" "));}
}
<html lang="en">
<head>
<title>D3 Transitions</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- JS -->
<!--
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
-->
<script type="text/javascript" src="../2902093/d3.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<style type="text/css" media="screen">
path {
fill: #fff;
stroke: #000;
stroke-width: 2px;
}
</style>
<div id="vis"></div>
<script type="text/javascript">
main();
</script>
</body>
</html>
Demonstrates some simple d3 transitions
see it more clearly at http://bl.ocks.org/2915574<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>2915574-d3-morph-path</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>