D3 Geo анимация не останавливается

Я в значительной степени новичок, пытающийся почувствовать некоторые вещи, которые кажутся интересными и немного не в моём понимании в 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';
}

Оригинальный код можно найти по адресу http://bl.ocks.org/johan/1392488 для справки.

Источник

1 ответ

Ваш связанный пример использует действительно старую версию d3 (версия 2). Я считаю, что анимация остановилась в этой версии, потому что ваш done переменная установлена ​​в false, функция таймера затем возвращает false и прекращает выполнение. В версии 4, однако, вам нужен явный вызов .stop ().

Вот исправленный код:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div class="tip">drag to rotate the origin</div>
        <div><label for="animate">animate:</label>
          <input id="animate" type="checkbox" checked>
        </div>
    <div id="body" style="width:800px;height:800px"></div>
    <script>
      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;
  timer.stop();
}

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

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


var m0
  , o0
  , done
  , timer
  ;

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';
}
    </script>
  </body>

</html>

Источник
Другие вопросы по тегам