D3グローブを回すラベルを隠すことができません

Question

Mike Bostockのスピングローブのバージョンを実装し、国ラベルをオーバーレイしようとしています。これは正常に達成されました：http://bl.ocks.org/dwtkns/4686432

残念ながら私は残念ながら、「地球の裏に」落ちるはずのラベルを隠すことはできません。私が試した方法は、軌道重心と地球儀の中心位置の間の距離を計算することです。私は、次のjsfiddleで私の仕事を保存している

function position_labels() { 
    var centerPos = projection.invert([width/2, height/2]); 

    var arc = d3.geo.greatArc(); 

    // update: update path projection before applying it to labels position 
    path.projection(projection); 
    svg.selectAll(".label") 
    .attr("transform", function(d) { 

     return "translate(" + path.centroid(d) + ")"; 
    }) 
    .style("display", function(d) { 
     var d = arc.distance({ 
     source: path.centroid(d), 
     target: centerPos 
     }); 
     return (d > 1.57) ? 'inline' : 'none'; 
    }) 
} 

：しかし、コードは一貫性がなく、間違ったラベルを隠すように思わ何らかの理由で...

これは、ラベルを隠しコードのビットであります私は私が間違っているのか知っている聞かせ願い：http://jsfiddle.net/Guill84/kh3kegsy/

UPDATE：

下の国名はまだマップの周りに浮いているように見えることにより、問題のスナップショットです。詳しい説明については、以下の私のコメントを参照してください。

Answer 1

私は上記の私のコメントでラベルの可視性を決定するための座標を使用して潜在的なハードルを指摘しました。ただし、ラベルが表示されるべきかどうかを判断する別の方法があります。国のsvgパスにnullでない属性 'd'があるかどうかを判断することです。

.attr("id", function(d) { return d.properties.name.split(' ').join('_'); }) 

は、英国や米国のような場所のよりよい同定を可能にします：

まず、IDはそうでIDを設定し、現在d.properties.nameは、スペースを含む、適切に設定する必要があります。

idに基づいて各パスを選択することによって、そのパスの形状を定義するデータがあるかどうかを確認できます。表示されていない場合、パスの 'd'プロパティはnullになります。

if (d3.select("#"+d.properties.name.split(' ').join('_')).attr('d') != null) { 
     return 'inline'; 
    } 
    else { 
     return 'none'; 
    } 

更新フィドル：here

より良いだけでなく、あなたのテキストを中央揃えかもしれない別のテキストアンカーを使用：真ん中のテキストアンカーと

.style("text-anchor","middle"); 

フィドル：here

--- Update --- 上記のコードでは、描画されていない国（世界の背後にある）のラベルは非表示になりますが、if国の任意の部分が描かれ、ラベルが作成されます。この問題を解決するには、中心から一定の距離にあるラベルを描画しないでください：fiddle, as mentioned in comment below

しかし、ロシアなどの一部の国では、地理的重心（したがってラベルの位置）が指定された半径内に収まる可能性があり、小さな国のスライバーがレンダリングされると描画されます。これが起こると、svgセントロイドではなく地理的セントロイドが国にラベルを付けるために使用されます。これらの場合、地理的重心は地球の遠い側にありますが、目に見える側にあるかのようにレンダリングされます。

また、フランスの場合、SVG重心と地理的重心は問題であろう。

カップル方法 は、コンピューティングのようなラベルのトグルを助けるために使用され、地理的重心を記録することができます地図投影センターからの角度距離を使用してラベルを表示/非表示にすることができます。フランスの場合は、ガリアナを分割すると便利です。

データを変更せずに、別の基準を使用して、どのラベルを表示するかを選択することができます。描かれた国の境界ボックスの中心がマップの端に近いかどうかを確認します。これは、計算の追加の層が追加されますが、必要に応じて各基準にのみチェックされている場合、それは大丈夫でなければなりません：それは地理的なパスがギアナを含んだようhttp://jsfiddle.net/0ptcy7f3/1/

var country = d3.select("#"+d.properties.name.split(' ').join('_')); 
// Exclude labels this far from center: 
var r = 350; 

// Check to see if the country has a path visible as before 
if (country.attr('d') != null) { 

    // Then check to see if the bounding box 
    // for the country as drawn is far from center 
    var BB = country.node().getBBox(); 
    var x = (BB.x + (BB.x + BB.width))/2; 
    var y = (BB.y + (BB.y + BB.height))/2; 

    if (((width-x)*(width-x) + (height-y)*(height-y)) < (r * r)) { 
     // And ensure the geographic centroid is also not on the edge: 
     center = path.centroid(d); 
     x = center[0]; 
     y = center[1]; 
    if (((width-x)*(width-x) + (height-y)*(height-y)) < (r * r)) { 
      return 'inline'; 
    } 
    else { 
      return 'none'; 
    } 
    } 
else { return 'none'; } 
else { return 'none'; } 

フランスの場合は、対処されていません。ラベルを特定の場所に強制し、その場所を有効な場所として評価するために、特殊なケースをコードに組み込むことができます。それ以外の場合は、データを編集する必要があります。このアップデートは、ロシアまたは他の大/長い国の世話をする必要があります。

マップをズームインするときに除外半径を変更することで調整できます（または、マップがフレーム全体を塗りつぶしている場合はそのチェックを行わないでください）。