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

Posted 2023-03-23

【中文标题】可以补间 d3.geo.circle().angle()

【英文标题】：possible to tween d3.geo.circle().angle()

【发布时间】：2017-03-06 13:29:16

【问题描述】：

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

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

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

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

感谢您的指点！

【问题讨论】：

什么版本的 d3 以及到目前为止尝试过的内容？

嗨，Kevin ~ 我正在使用 D3v3，但可能会将整个内容移至 v4。我将尝试从更大的项目中提取一个示例...我只是想知道它是否可能，因为我找不到任何远程相似的示例。

你想在地图上放置一个弧，然后当弧“着陆”时在地图上画一个圆圈？

否，尝试从上述网址重新创建“脉冲”。现有的圆将获得更大的半径，然后过渡回其原始大小。普通圆圈很简单，但我正在尝试使用 geo.circle() 以便它在旋转的地球上工作。

我终于找到了一个应该可以工作的例子：jsfiddle.net/Lg9z57g5

【参考方案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... 以避免控制台错误。

【讨论】：

我在上下文中的解决方案可以在此处的“可重用可更新全局混搭”块中找到：bl.ocks.org/TennisVisuals