为什么我的d3弧线不会过渡？

Question

我正在尝试制作弧线（在地理投影上），它从一点开始并逐渐增长到另一点。但是，过渡似乎永远不会发生 - 弧线刚刚完全形成！任何想法为什么会这样？

jsfiddle here

leeroyjenkins = function(){
    var data = [{"lat": 0, "lon": 0},
                {"lat": 10, "lon": 10},
                {"lat": 20, "lon": 20},
                {"lat": 30, "lon": 30},
                {"lat": 40, "lon": 40},]
    main(data);
};

var main = function(points) {
  var width = 960,
      height = 500;

  var startpt = {"lat": 15, "lon": 15};

  var projection = d3.geo.orthographic()
      .scale(250)
      .translate([width / 2, height / 2])
      .clipAngle(90);

  var arcpath = function (startpt, endpt) {
      var p = d3.geo.path()
                .projection(projection);
      return p({type: "LineString", coordinates: [[startpt.lon, startpt.lat],
                                                  [endpt.lon, endpt.lat]]});
    }

  var λ = d3.scale.linear()
      .domain([0, width])
      .range([-180, 180]);

  var φ = d3.scale.linear()
      .domain([0, height])
      .range([90, -90]);

  var drag = d3.behavior.drag()
      .origin(function() { var r = projection.rotate();
                          return {x: λ.invert(r[0]), y: φ.invert(r[1])}; })
      .on("drag", function() {
        projection.rotate([λ(d3.event.x), φ(d3.event.y)]);
        svg.selectAll("path.arc").attr("d", function(d) {return arcpath(d, startpt)});
      });

  var tooltip = d3.select("body")
                  .append("div") 
                  .attr("id", "tooltip");

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

  svg.append("path")
        .attr("id", "outline")
        .datum({type: "Sphere"})
        .attr("d", d3.geo.path().projection(projection));

  svg.selectAll("path.arc")
        .data(points)
        .enter()
          .append("path")
            .attr("class", "arc")
            .attr("d", function (d) {return arcpath(d, d)})
              .transition()
              .duration(1000)
              .attr("d", function (d) {return arcpath(d, startpt)});

};

leeroyjenkins();