D3 js 직교 마커 회전

Question

현재 D3로 만든 반 기능성 정사각형 구형입니다. 마커가있는지도입니다. 모든 "육지"영역이 잘 표시되어 있지만 드래그하여 회전시킬 수는 있지만 SVG 마커는 회전하지 않습니다.

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

가 어떤 방식으로 작동 만들려고 노력 후, 나는 단지 세계의 "점"을 클립 할 수 있었다,하지만 SVGs : 여기 내 현재 테스트 코드입니다. svg가 'g'태그에 들어가야하고 결과가 'd'태그에 경로가없는 것으로 보입니다.

내가 필요한 것은 : SVGs는 'generated.json'

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

사람이 수 있다면 좀 실망과에 지정된 위치로 잘린와 전체지도, 드래그 액션과 함께 회전한다 도와 줘서 고마워.

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.