Question

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

 include_directories(/full_parent_path_of_src)

旋转地球上的

...所以我必须使用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（） 函数，因此它查找可能已存在于绑定数据中的radius属性。

  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;
        });
  }

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

可以补间d3.geo.circle（）。angle（）

1 个答案: