Created
June 12, 2012 06:19
-
-
Save aogriffiths/2915574 to your computer and use it in GitHub Desktop.
d3 morph a path
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <projectDescription> | |
| <name>2915574-d3-morph-path</name> | |
| <comment></comment> | |
| <projects> | |
| </projects> | |
| <buildSpec> | |
| </buildSpec> | |
| <natures> | |
| </natures> | |
| </projectDescription> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Demonstrates some simple d3 transitions | |
| see it more clearly at http://bl.ocks.org/2915574 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(" "));} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment