DJ3S - Rotasyon, ortografik projeksiyonda döndürüldüğünde kaldırıldı

Question

Dünyayı bir küre olarak görmek için D3JS ortografik izdüşümü kullanıyorum ve tüm coutries altında graticule ekledim. Her şey yolunda ama ben dönme izin vermek için sürtünme mecanism eklediğinizde, olay işleme sırasında graticule kaldırılır. İşte

çekirdek kodu:

var width = 1000, 
    height = 1000; 

    var projection = d3.geo.orthographic() 
     .scale(475) 
     .translate([width/2, height/2]) 
     .clipAngle(90) 
     .precision(.1) 
     .rotate([0,0,0]); 

    var path = d3.geo.path() 
     .projection(projection); 

    var graticule = d3.geo.graticule(); 

    var svg = d3.select("#map").append("svg") 
     .attr("id", "world") 
     .attr("width", width) 
     .attr("height", height); 

    // Append all meridians and parallels 
    svg.append("path") 
     .datum(graticule) 
     .attr("class", "graticule") 
     .attr("d", path); 

    d3.json("world-countries.json", function(collection) { 
     var countries = svg.selectAll("path") 
      .data(collection.features) 
      .enter().append("path") 
      .attr("d", path) 
      .attr("class", "country") 
      .attr("id", function(d) {return d.id;}); 
    }); 

Ve burada rototation geçerli:

var λ = d3.scale.linear() 
     .domain([0, width]) 
     .range([-180, 180]); 

    var φ = d3.scale.linear() 
     .domain([0, height]) 
     .range([90, -90]); 

    var drag = d3.behavior.drag().origin(function() { 
     var r = projection.rotate(); 
     return { 
      x: λ.invert(r[0]), 
      y: φ.invert(r[1]) 
     }; 
    }).on("drag", function() { 
     projection.rotate([λ(d3.event.x), φ(d3.event.y)]); 
     svg.selectAll("path").attr("d", path); 
    }); 

    svg.call(drag); 

Bu kod çalışmaz ve burada yaşamak bkz olabilir: http://www.datavis.fr/d3js/map-world-temperature/fullscreenBad.html

Bu biridir (Rotasyon tamamlandığında her zaman gratikülü kaldırırım ve ekliyorum): http://www.datavis.fr/d3js/map-world-temperature/fullscreen.html

Yardımlarınız için teşekkürler.

Answer 1

Kesinlikle tüm graticule'leri kaldırmanız ve çizmeniz gerekmez.

Sürüklemede güncellemeniz gerekir.

svg.selectAll(".graticule") //get all graticule 
    .datum(graticule) 
    .attr("d", path);//update the path 

Ve ayrıca sürükleyin yanlış bir şekilde ülke yolunu güncelleme:

svg.selectAll("path").attr("d", path);//this updates all the paths country +graticule which is wrong 

böyle (sadece güncelleme ülkenin tüm yol) do

svg.selectAll(".country").attr("d", path); //only update country 

çalışma kodu here