Javascript d3地理动画不会停止

在d3.js中，我几乎是一个新手，试图对一些看起来很有趣、有点不懂的东西有所了解。当然，我在bl.ocks.org上乱搞一些代码，这些代码会在我不了解原因的情况下中断

这可能是一个比它看起来更大的问题，或者我遗漏了一些明显的东西，但是我无法让旋转动画停止，就像在选中球体或取消选中“动画”框时那样。其他一切似乎都按计划进行

以下是我对d3.v4所做的操作：

var feature;

var projection = d3.geoOrthographic()
    .scale(380)
    .rotate([71.03,-42.37])
    .clipAngle(90)
    .translate([400, 400]);

var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("#body").append("svg:svg")
    .attr("width",  "100%")
    .attr("height", "100%")
    .on("mousedown", mousedown);

if (frameElement) frameElement.style.height = '800px';

d3.json("https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json", function(collection) {
  feature = svg.selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr("d",clip);

  feature.append("svg:title")
      .text(function(d) { return d.properties.name; });

  startAnimation();

  d3.select('#animate').on('click', function () {
    if (done) startAnimation(); else stopAnimation();
  });
});

function stopAnimation() {
  done = true;
  d3.select('#animate').node().checked = false;
}

function startAnimation() {
  done = false;
  d3.timer(function() {
    var rotate = projection.rotate();
    rotate = [rotate[0] + 0.1, rotate[1]];
    projection.rotate(rotate);
    refresh();
    return done;
  });
}

function animationState() {
  return 'animation: '+ (done ? 'off' : 'on');
}

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);


var m0
  , o0
  , done
  ;

function mousedown() {
  stopAnimation();
  m0 = [d3.event.pageX, d3.event.pageY];
  o0 = projection.rotate();
  d3.event.preventDefault();
}

function mousemove() {
  if (m0) {
    var m1 = [d3.event.pageX, d3.event.pageY]
      , o1 = [o0[0] - (m0[0] - m1[0]) / 8, o0[1] - (m1[1] - m0[1]) / 8];
    projection.rotate(o1);
    refresh();
  }
}

function mouseup() {
  if (m0) {
    mousemove();
    m0 = null;
  }
}

function refresh(duration) {
  (duration ? feature.transition().duration(duration) : feature).attr("d",clip);
}

function clip(d) {
  return path(d);
}

function reframe(css) {
  for (var name in css)
    frameElement.style[name] = css[name] + 'px';
}

---

原始代码可在中找到以供参考。

您链接的示例使用的是非常旧版本的

d3

（版本2）。我相信动画在该版本中停止了，因为

done

变量设置为false，计时器函数返回false并停止执行。但是，在版本4中，您需要显式调用

以下是修补后的代码：

拖动以旋转原点
使有生气：
var特征；
var projection=d3.geoporthographic（）
.比例尺（380）
.旋转（[71.03，-42.37]）
clipAngle先生（90）
.翻译（[400400]）；
var path=d3.geoPath（）
.投影（投影）；
var svg=d3.选择（#body”）.追加（“svg:svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.on（“mousedown”，mousedown）；
如果（frameElement）frameElement.style.height='800px'；
d3.json（“https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json，函数（集合）{
feature=svg.selectAll（“路径”）
.数据（收集.特征）
.enter（）.append（“svg:path”）
.attr（“d”，clip）；
feature.append（“svg:title”）
.text（函数（d）{return d.properties.name；}）；
startAnimation（）；
d3.选择（“#动画”）。打开（'click'，函数（）{
如果（完成）启动动画（）；否则停止动画（）；
});
});
函数stopAnimation（）{
完成=正确；
d3.选择（“#动画”）.node（）.checked=false；
timer.stop（）；
}
函数startAnimation（）{
完成=错误；
定时器=d3.定时器（函数（）{
var rotate=projection.rotate（）；
旋转=[旋转[0]+0.1，旋转[1]]；
投影。旋转（旋转）；
刷新（）；
});
}
d3.选择（窗口）
.on（“mousemove”，mousemove）
.on（“mouseup”，mouseup）；
var m0
，o0
，完成
，计时器
;
函数mousedown（）{
停止动画（）；
m0=[d3.event.pageX，d3.event.pageY]；
o0=投影。旋转（）；
d3.event.preventDefault（）；
}
函数mousemove（）{
if（m0）{
变量m1=[d3.event.pageX，d3.event.pageY]
，o1=[o0[0]-（m0[0]-m1[0]）/8，o0[1]-（m1[1]-m0[1]）/8]；
投影。旋转（o1）；
刷新（）；
}
}
函数mouseup（）{
if（m0）{
mousemove（）；
m0=零；
}
}
函数刷新（持续时间）{
（duration？feature.transition（）.duration（duration）：feature.attr（“d”，clip）；
}
功能夹（d）{
返回路径（d）；
}
函数重构（css）{
for（css中的变量名称）
frameElement.style[name]=css[name]+'px'；
}