Question

我正在尝试实施Mike Bostock的spinny globe版本并叠加国家标签。这已在此成功实现：http://bl.ocks.org/dwtkns/4686432

不幸的是，我无法用我自己的代码实现这一点，原因是我不能理解。我想知道这是否也可能不是因为我添加了缩放功能。

这是我初始化标签的方式

    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;} );

这是我尝试转换标签的方式

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';
    })

}

我的代码可以在这里找到。 http://jsfiddle.net/Guill84/3078L7x2/

非常感谢您的帮助;）

Answer 1

每次地球移动时你都需要不断更新标签的位置。我稍微修改了您的代码，为我的更改添加了评论// update。这仅会将标签与地球一起移动。但希望有助于作为起点。 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';
        //   })
}

在position_labels()和text以及startAnimation()后追加move()。

无法转换旋转地球仪上的标签

1 个答案: