DJ3S - 在正交投影中完成旋转时移除标线

Question

我正在使用 D3JS 正交投影将世界视为一个球体，并且我在所有国家/地区下添加了经纬网。一切都很好，但是当我添加拖动机制以允许旋转时，在事件处理期间删除了标线。

核心代码如下：

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

这是旋转：

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

此代码无效，可在此处实时查看：http://www.datavis.fr/d3js/map-world-temperature/fullscreenBad.html

这个正在工作（每次旋转完成后我删除并添加标线）：http://www.datavis.fr/d3js/map-world-temperature/fullscreen.html

感谢您的帮助。

Answer 1

您绝对不需要删除并重新绘制所有标线。

您需要在拖动时更新它。

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

还有拖拽你以错误的方式更新国家/地区路径：

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

这样做（只更新国家不是所有路径）

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

工作代码here

DJ3S - 在正交投影中完成旋转时移除标线

DJ3S - Graticule removed when rotation is done in orthographic projection

d3.js

projection

orthographic