Question

目前我有D3制作的半功能拼图地球仪。这是一个带标记的地图。所有＆＃34; land＆＃34;区域显示良好可以通过draggin旋转，但svg标记不会。这是我目前的测试代码：

＆＃13;

var width = 960,
    height = 500,
    sens = 0.25;

var proj = d3.geo.orthographic()
    .scale(220)
    .translate([width / 2, height / 2])
    .clipAngle(90);

var path = d3.geo.path().projection(proj).pointRadius(function(d) { return 6 });

var svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height);

var g = svg.append('g');

queue()
    .defer(d3.json, 'data/world-110m.json')
    .defer(d3.json, 'data/generated.json')
    .await(ready);

function ready(error, world, locations) {

    g.append('path')
      .datum({type: 'Sphere'})
      .attr('class', 'water')
      .attr('d', path);

    g.selectAll('g.land')
      .data(topojson.feature(world, world.objects.countries).features)
      .enter().append('path')
      .attr('class', 'land')
      .attr('d', path)
      .call(d3.behavior.drag()
        .origin(function() {
          var r = proj.rotate();
          return {x: r[0] / sens, y: -r[1] / sens}; })
        .on('drag', function(d) {
            var rotate = proj.rotate();
            proj.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
            g.selectAll('.land').attr('d', path);
          }));

    var nodes = g.selectAll('g.node')
      .data(locations)
      .enter().append('g').attr('class', 'node')
      .attr('transform', function(d) {
        var proj_pos = proj([d.lon, d.lat]);
        return 'translate(' + proj_pos[0] + ',' + proj_pos[1] + ')';
      })
      .attr('style', 'cursor: pointer')
      .attr("d", path);

    nodes.append("svg:image")
      .attr('transform', 'translate(-24, -20)')
      .attr('width', 20)
      .attr('height', 24)
      .classed('white',true)
      .attr("href","data/marker.svg");

    console.log(g.selectAll('g.node'));
}

＆＃13;

试图让它以某种方式工作后，我只能剪辑＆＃34;积分＆＃34;在地球上，但没有SVG。似乎svg必须进入＆＃39; g＆＃39;标记和结果我的节点＆＃39;没有路径在＆＃39; d＆＃39;标签。

我需要的是：整个地图必须使用拖动操作旋转，SVG被剪切到位置，在＆quot; generated.json＆＃39;

中指定

＆＃13;

[
  {
    "lat": 62.782176,
    "lon": 54.3214
  },
  {
    "lat": -61.007975,
    "lon": -5.05281
  },
  {
    "lat": -78.166262,
    "lon": 45.320536
  }
]

＆＃13;

有点令人沮丧，如果有人可以帮助我，我会非常感激。

Answer 1

更新节点的位置非常简单。但是，这里的技巧是确定标记何时“关闭”地球（在地图背面附近）。我能想到的唯一方法是生成一个点路径，看它是否未定义：

.on('drag', function(d) {

  //update land like you've been doing
  var rotate = proj.rotate();
  proj.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
  g.selectAll('.land').attr('d', path);

  // for each node
  nodes.each(function(d, i) {
    var self = d3.select(this),
      lon_lat = [d.lon, d.lat];
      proj_pos = proj(lon_lat);

    // check to see if it's still visible
    var hasPath = path({
      type: "Point",
      coordinates: lon_lat
    }) != undefined;

    // if it is show it and update position
    if (hasPath) {
      self.style("display","inline");
      self.attr("transform", 'translate(' + proj_pos[0] + ',' + proj_pos[1] + ')');
    }
    // otherwise hide it
    else {
      self.style("display","none")
    }
  });
}));

完整running code。

D3 js正交标记旋转

1 个答案: