SVG textPath placement

<!DOCTYPE html>
<meta charset="utf-8">
<title>SVG Swarm</title>
<style>

svg {
  position: absolute;
  top: 0;
}

use {
    stroke:#000;
    stroke-width:2;
}

</style>
<div id="fps">FPS: <span>?</span></div>
<script src="https://d3js.org/d3.v2.min.js?2.9.1"></script>
<script>

var data = [[0,0],[0,1]];

var width = 960,
    height = 500;

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 1])
    .range([0, height]);

var time0 = Date.now(),
    time1;

var fps = d3.select("#fps span");

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var use = svg.append('defs').append('path').attr('id', 'path-use')
    .data([data])
    .attr("d", function(d) {
        return 'M' + d.map(function(a) {
            return [x(a[0]), y(a[1])];
        }).join('L');
    });

var p = svg.append("use").attr('xlink:href', '#path-use');
var test = svg.append("text").append('textPath').attr('xlink:href', '#path-use').text('the quick brown fox jumped over the lazy dog');
var fpsqueue = [];
var forward = true;

d3.timer(function() {

if (forward) {
      data[1][0] += 0.01;
      data[0][0] += 0.01;
  } else {
      data[1][0] -= 0.01;
      data[0][0] -= 0.01;
  }
  if (data[1][0] > 1) forward = false;
  if (data[1][0] < 0) forward = true;

use.attr("d", function(d) {
      return 'M' + d.map(function(a) {
          return [x(a[0]), y(a[1])];
      }).join('L');
  });

// p.attr('xlink:href', '#path-use');

time1 = Date.now();
  if (fpsqueue.length === 200) { fps.text(d3.mean(fpsqueue).toFixed(3)); fpsqueue = []; }
  fpsqueue.push(Math.round(1000 / (time1 - time0)));
  time0 = time1;
});

</script>

Modified http://d3js.org/d3.v2.min.js?2.9.1 to a secure url

https://d3js.org/d3.v2.min.js?2.9.1