javascript - 无法将城市隐藏在旋转的地球后面

Question

我整理了一个 jsfiddle，我在其中实现了 Bostock 旋转地球仪。

然后我尝试绘制几个标记(城市)。这只是部分成功。由于某种原因，并不是所有的都被绘制出来——而且，我假设出于类似的原因——用于隐藏那些看不见的城市(即在地球后面)的脚本没有按预期工作。当您将标记滚动到看不见的地方时，它们仍在不请自来地跳来跳去。

我整理了以下 fiddle :http://jsfiddle.net/Guill84/jg3axLmx/1/

下面是用于“隐藏”地球后面的标记的脚本:

function position_cities() {
   var centerPos = projection.invert([380,380]);
   var arc = d3.geo.greatArc();
   svg.selectAll(".cities")
     .style("fill", "blue")
     .attr("cx", function(d) {
       return projection([d.lon, d.lat])[0];
     })
     .attr("cy", function(d) {
       return projection([d.lon, d.lat])[1];
     })
     .style({
       "color": "#FFF",
       "display": function(d) { 
         var x = projection([d.lon, d.lat])[0];
         var y = projection([d.lon, d.lat])[1];
         var d = arc.distance({
           source: [d.lat, d.lon],
           target: centerPos
         });
         return (d > 1.57) ? 'none' : 'inline';
       }
     });
 }

此外 - 您知道如何为这些标记添加标签，并使它们变成方形而不是圆形吗？

上面的问题类似这样: Cannot hide labels 'behind' spinning D3 Globe

在这里您可以看到巴西的标记仍然可见

Answer 1

你几乎拥有它，

如评论中所述，中心点位于 400,400:

var centerPos = projection.invert([400,400]);

并且您在此处混淆了源坐标中的经纬度顺序:

var d = arc.distance({source: [d.lat, d.lon], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

这应该是:

var d = arc.distance({source: [d.lon, d.lat], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

fiddle :http://jsfiddle.net/L51y3c1b/