D3.js DJ3S-在正交投影中旋转时移除的分划

我使用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);

此代码不起作用，可在此处查看：

这个正在工作（每次旋转时，我都会移除并添加分划）：

---

谢谢您的帮助。

您绝对不需要删除并再次绘制所有分划

您需要在拖动时对其进行更新

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