DJ3S - Graticule entfernt, wenn die Drehung in orthographischer Projektion erfolgt

Question

Ich verwende D3JS orthographische Projektion, um die Welt als eine Kugel zu sehen, und ich habe Raster unter allen Ländern hinzugefügt. Alles ist in Ordnung, aber wenn ich Drag Mecanism hinzufüge, um Rotation zu ermöglichen, wird das Gradnetz während der Ereignisbehandlung entfernt. Hier

ist der Kern-Code:

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

Und hier ist die rototation:

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

Dieser Code funktioniert nicht und kann hier leben werden, siehe: http://www.datavis.fr/d3js/map-world-temperature/fullscreenBad.html

Dieser ist arbeiten (ich entferne und füge das Raster jedes Mal hinzu, wenn eine Drehung gemacht wird): http://www.datavis.fr/d3js/map-world-temperature/fullscreen.html

Danke für jede Hilfe.

Answer 1

Sie müssen auf jeden Fall nicht alle Raster entfernen und zeichnen.

Sie müssen es beim Ziehen aktualisieren.

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

Und auch auf drag Sie das Land Pfad in einer falschen Weise Aktualisierung:

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

tun wie dieses (nur Update Land nicht alle Pfad)

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

Arbeitscode here