javascript - 带动画文字的 D3 Canvas 地球仪

Question

我正在使用带有 geoOrthographic 的 d3 V4 在 Canvas 上旋转 3d 地球。

我遵循并拼接了 bl.ocks.org 中的一些示例来实现这一点。我是 d3 的新手。到目前为止，我的地球在旋转，并且在某个城市位置出现了点，这些点随着地球的旋转而相应地出现和消失。

我也已将城市名称附加到相应的点，但我无法将它们与点同步。所以我的城市名称不会与点同时出现或消失。

这是我的地球的代码笔。 Codepen Canvas Globe我制作了一个 Globe，它可以按我想要的方式工作，但在 SVG 中 Codepen SVG Globe但是 SVG 对我来说是不可能的，因为一旦添加到应用程序中，它就会减慢太多的速度。因此，出于性能原因，我必须使用 Canvas 。

我已经厌倦了 Stackoverflow 上其他帖子的一些解决方案/想法，但无法使其发挥作用。

感谢帮助

Answer 1

我将你的第二个示例中的代码更精确地重构到你的第一个示例中并且它有效:

outerArray.forEach(function(d) {
  const coordinate = [d[0], d[1]];
  const center = [width / 2, height / 2];
  gdistance =d3.geoDistance(coordinate,projection.invert(center));

  if(gdistance < 1.57079632679490) {
    context.fillText( 
    d[2],
    projection(d)[0], 
    projection(d)[1] 
    );  
  }  
});

已更新 codepen .