| height: 400 |
This is an example from my blog on Placing Texts on Arcs with D3.js that shows that a transition between similar paths (two arcs in this case) can be accomplished by the standard .transition().duration()
Another version shows how to transition between more complex paths
Other examples of text along a path from the same blog
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <title>Text on simple Arc</title> | |
| <!-- D3.js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <!-- Google Font --> | |
| <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | |
| <style> | |
| body { | |
| font-family: 'Pacifico', sans-serif; | |
| fill: #333333; | |
| font-size: 30px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| //Create the SVG | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 400) | |
| .attr("height", 400); | |
| //Create an SVG arc starting at location [0,300], ending at [400,300] with a radius of 200 (circle) | |
| var path = svg.append("path") | |
| .attr("id", "wavy") //A unique ID to reference later | |
| .attr("d", "M0,300 A200,200 0 0,1 400,300") //Notation for an SVG path | |
| .style("fill", "none") | |
| .style("stroke", "#AAAAAA") | |
| .style("stroke-dasharray", "5,5"); | |
| //Create an SVG text element and append a textPath element | |
| var textArc = svg.append("text") | |
| .style("text-anchor","middle") | |
| .append("textPath") //append a textPath to the text element | |
| .attr("xlink:href", "#wavy") //place the ID of the path here | |
| .attr("startOffset", "50%") //place the text halfway on the arc | |
| .text("Yay, my text is moving back & forth"); | |
| //Transition to an arc starting at location [75,300], ending at [325,300] with a radius of 125 (circle) | |
| //svg.selectAll("path") | |
| // .transition().duration(2000).delay(2000) | |
| // .attr("d", "M75,300 A125,125 0 0,1 325,300"); | |
| function repeat() { | |
| path | |
| .transition().duration(2000) | |
| //Transition to an arc starting at location [75,300], ending at [325,300] with a radius of 125 (circle) | |
| .attr("d", "M50,300 A150,150 0 0,1 350,300") | |
| .transition().duration(2000) | |
| //Transition back to original arc | |
| .attr("d", "M0,300 A200,200 0 0,1 400,300") | |
| .each("end", repeat); | |
| }//repeat | |
| //Repeatedly change the arcs back and forth | |
| repeat(); | |
| </script> | |
| </body> | |
| </html> |
