回転グローブでラベルを変換できません

Question

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

残念ながら私は私を逃れる理由のために私自身のコードでこれを実装することはできません。そして、私はこれがズーム機能を追加したという事実によるものではないかと思います。

これは、私はこれは私が私のコードはここで見つけることができますラベル

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

    var arc = d3.geo.greatArc(); 

    svg.selectAll(".label") 
    .attr("text-anchor",function(d) { 
     var x = projection(d.geometry.coordinates)[0]; 
     return x < width/2-20 ? "end" : 
      x < width/2+20 ? "middle" : 
      "start" 
    }) 
    .attr("transform", function(d) { 
     var loc = projection(d.geometry.coordinates), 
     x = loc[0], 
     y = loc[1]; 
     var offset = x < width/2 ? -5 : 5; 
     return "translate(" + (x+offset) + "," + (y-2) + ")" 
    }) 
    .style("display",function(d) { 
     var d = arc.distance({source: d.geometry.coordinates, target: centerPos}); 
     return (d > 1.57) ? 'none' : 'inline'; 
    }) 

} 

を変換しようとする方法であるラベル

var label = svg.selectAll("text") 
     .data(collection.features) 
     .enter() 
     .append("text") 
     .attr("class", "label") 
//  .attr("transform", function(d) { return "translate(" + //path.centroid(d) + ")"; }) 
     .text(function(d) { return d.properties.name;}); 

を初期化する方法です。 http://jsfiddle.net/Guill84/3078L7x2/あなたのヘルプは非常に高く評価されるだろう

、あなたは毎回世界の動きをラベルの位置を更新し続ける必要がある）

Answer 1

。あなたのコードを少し変更し、私の変更のためにコメント// updateを追加しました。これは、地球と一緒にラベルを移動するだけです。しかし、うまくいけば出発点として役立つ。 textとstartAnimation()とmove()中を付加した後position_labels()を呼び出すhttp://jsfiddle.net/3078L7x2/4/

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) + ")"; 
     }) 
     // svg.selectAll(".label") 
     // .attr("text-anchor",function(d) { 
     //  var x = projection(d.geometry.coordinates)[0]; 
     //  return x < width/2-20 ? "end" : 
     //   x < width/2+20 ? "middle" : 
     //   "start" 
     // }) 
     // .attr("transform", function(d) { 
     // var loc = projection(d.geometry.coordinates), 
     //  x = loc[0], 
     //  y = loc[1]; 
     // var offset = x < width/2 ? -5 : 5; 
     // return "translate(" + (x+offset) + "," + (y-2) + ")" 
     // }) 
     // .style("display",function(d) { 
     //  var d = arc.distance({source: d.geometry.coordinates, target: centerPos}); 
     //  return (d > 1.57) ? 'none' : 'inline'; 
     // }) 
} 

。