Skip to content

Instantly share code, notes, and snippets.

@nbremer
Last active Jun 18, 2016
Embed
What would you like to do?
Text on an Arc - Animate from Arc to an Arc
height: 400
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment