| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <title>Transitions</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var circleData = [ | |
| {"cx":"25", "cy":"25", "r":"5"}, | |
| {"cx":"50", "cy":"50", "r":"5"}, | |
| {"cx":"75", "cy":"75", "r":"5"}, | |
| ]; | |
| d3.select("body").append("svg"); | |
| d3.select("svg") | |
| .selectAll("circle") | |
| .data(circleData) | |
| .enter() | |
| .append("circle"); | |
| d3.selectAll("circle") | |
| .attr(("cx"),function(d,i){return (i*25)+25;}) | |
| .attr(("cy"),function(d,i){return (i*25)+25;}) | |
| .attr(("r"),function(d,i){return 5}); | |
| function crazyFunction (d,i){ | |
| d3.select(this) | |
| .transition().attr("r","25").attr("fill","yellow") | |
| .transition().attr("r","5").attr("fill","black") | |
| .transition().attr("cx","100") | |
| .transition().attr("cy","100") | |
| .transition() | |
| .attr("cx",function(d,i){return d.cx}) | |
| .attr("cy",function(d,i){return d.cx}) | |
| .attr("fill","blue") | |
| .transition() | |
| .attr("stroke-width", "2") | |
| .attr("stroke", "red") | |
| }; | |
| //call function | |
| d3.selectAll("circle").on("mouseover", crazyFunction); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment