Text Along a Path by zanarmstrong

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

#curve-text {
  font: 40px sans-serif;
}

#curve-line {
  stroke: #999;
  fill: none;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
    .attr("viewBox", "0 0 1000 300");

svg.append("defs").append("path")
    .attr("id", "curve")
    .attr("d", "xxxxx");

svg.append("text")
    .attr("id", "curve-text")
  .append("textPath")
    .attr("xlink:href", "#curve")
    .text("We go up, then we go down, then up again.");

svg.append("use")
    .attr("id", "curve-line")
    .attr("xlink:href", "#curve");

</script>