可以补间 d3.geo.circle().angle()

Question

我正在尝试从这个示例中重新创建“脉冲”效果：

https://anthonyskelton.com/2016/d3-js-earthquake-visualizations/

在一个旋转的地球上...所以我必须使用 d3.geo.circle() 来生成路径（而不是 svg 圆）来正确管理剪辑。

我可以转换（）其他属性，但我猜我需要对每个圆圈的路径进行补间......我只是不知道从哪里开始，也找不到任何例子......很少使用 d3.geo.circle() 的示例，它们都是静态的。

感谢您的指点！

Answer 1

这个问题的解决方案是通过提出一个相关问题来解决的： D3: Accessing bound data after using .datum()

第一步是了解 d3.geo.path().pointRadius() 并创建一个函数以传递给 .attr(' d', f(d){})

i 参数未使用，但用作占位符，以便可以传递半径 r。

pointPath() 函数在 update() 和 的其他地方使用reDraw() 函数，因此它会查找可能已经存在于绑定数据中的半径属性。

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

  // var pointPath = function(d, i, data, r) { // d3v4 adds extra param
  var pointPath = function(d, i, r) {
     if (d.properties && d.properties.radius != undefined) {
        r = r || d.properties.radius;
     }
     r = r || 1.5;
     var coords = [d.geometry.coordinates[0], d.geometry.coordinates[1]];
     var pr = geoPath.pointRadius(globe.scale() / 100 * r);
     return pr({ type: "Point", coordinates: coords })
  }

然后可以使用 .attrTween()

制作动画

  pulse = function() {
     surface.selectAll('.pulse-circle')
        .attr("d", function(d) { return pointPath(d, 0, 0); })
        .style("fill-opacity", 1 )
        .transition()
        .delay(function(d, i) { return i * 200; })
        .duration(3000)
        .style("fill-opacity", 0 )
        .attrTween("d", function(d) {
          rinterp = d3.interpolate(0, 10);
          var fn = function(t) {
            d.r = rinterp(t);
            return pointPath(d, 0, d.r) || 'M0,0';
          };
          return fn;
        });
  }

因为这发生在旋转的地球上，我必须添加 return 'M0,0' if pointPath() 返回 undefined... 以避免控制台错误。