javascript - D3 : Animate circle along border of country on spinning globe

Question

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

我想及时向地球添加其他路径并将它们用于我的动画。现在，我只想为沿着俄罗斯边界的圆圈(即沿着俄罗斯多边形坐标的路径)制作动画

我已经构建了一个 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
      }
    }
  }    

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

Answer 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)

查看更新后的 fiddle :http://jsfiddle.net/xqmevpjg/11/