D3：旋转地球上沿国家边界的动画圆圈答案

【问题标题】：D3: Animate circle along border of country on spinning globeD3：旋转地球上沿国家边界的动画圆圈
【发布时间】：2016-05-27 02:34:55
【问题描述】：

我的问题很容易解释，但我在实施解决方案时遇到了真正的麻烦。我正在尝试沿 D3 地图上的路径为圆圈设置动画。这里的转折是我想使用 Mike Bostock 的旋转地球仪之一（即 3D 地图）。

我想及时添加到地球的其他路径并将这些路径用于我的动画。现在，我只想为俄罗斯边界沿线的圆圈设置动画（即沿俄罗斯多边形坐标的路径）

我已经构建了一个 jsfiddle 来获得牵引力，你可以看到我的所有代码。不幸的是，我无法让它工作，希望你能帮助我。我的 jsfiddle：http://jsfiddle.net/Guill84/xqmevpjg/7/

我认为我的主要困难是 (a) 实际引用俄罗斯路径，但我认为我目前没有得到正确的结果，以及 (b) 确保正确计算插值（即动画是动态的链接到地球，而不仅仅是“分层”）。应该这样做的代码如下：

setTimeout(function(){
  var path = d3.select("path#Russia"),
  startPoint = pathStartPoint(path);

  marker.attr("r", 7)
    .attr("transform", "translate(" + startPoint + ")");

  transition();

  //Get path start point for placing marker
  function pathStartPoint(path) {
    var d = path.attr("d"),
    dsplitted = d.split(" ");
    return dsplitted[1].split(",");
  }

  function transition() {
    marker.transition()
        .duration(7500)
        .attrTween("transform", translateAlong(path.node()))
        .each("end", transition);// infinite loop
  }

  function translateAlong(path) {
    var l = path.getTotalLength();
    return function(i) {
      return function(t) {
        var p = path.getPointAtLength(t * l);
        return "translate(" + p.x + "," + p.y + ")";//Move marker
      }
    }
  }

如果有任何帮助，我将不胜感激。

【问题讨论】：

标签： javascript animation d3.js

【解决方案1】：

对于您问题的第一部分，选择路径的一种方法是将 id 添加到 id ：

d3.json("http://mbostock.github.io/d3/talk/20111018/world-countries.json", function(collection) {
  feature = svg.selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr("d", clip)
      .attr("id", function(d) { return d.properties.name; }) ;

然后选择这样的路径：

var path = d3.select("#Russia").node()

然后你可以选择第一个点：

path.getPointAtLength(0)

查看这个更新的小提琴：http://jsfiddle.net/xqmevpjg/11/

【讨论】：