Javascript D3.js旋转贴图会破坏样式设置

我正在尝试旋转球体（正交投影）。 我现在做的是旋转地球，虽然它非常起伏，它打破了我拖动它后地图的外观（分划和海洋填充）

如何改进代码以使其更好？ 以下是相关代码：

const svg = d3.select('svg');

const projection = d3.geoOrthographic()
const graticule = d3.geoGraticule();
let pathGenerator = d3.geoPath().projection(projection);


const g = svg.append('g');

g.append('path')
    .attr('class', 'sphere')
    .attr('d', pathGenerator({type: 'Sphere'}));

g.append('path')
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", pathGenerator);

g.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));


g.call(d3.zoom().on('zoom', () => {
   g.attr('transform', d3.event.transform)
 }));

function dragstarted(){
  console.log("started");
}
function dragged(){
  const rotate = projection.rotate()
    const k = 75 / projection.scale()
    //console.log(k);
    projection.rotate([
      rotate[0] + d3.event.dx * k,
      rotate[1] - d3.event.dy * k
    ])
    pathGenerator = d3.geoPath().projection(projection)
    svg.selectAll("path").attr("d", pathGenerator)
}
function dragended(){
  console.log("drag ended");
}

编辑：

---

现场演示：

好的，我做了两件事

在

拖动的
函数中，我没有选择所有路径元素作为一个元素，而是逐个选择它们。。。因此，将行
svg.selectAll（“path”）.attr（“d”，pathGenerator）
替换为
svg.selectAll（.gracile”）.attr（“d”，pathGenerator）
和
svg.selectAll（.country”）.attr（“d”，pathGenerator）

当您附加使用selectAll（'path'）的国家时，如下所示

g.selectAll（'path'）.data（countries.features）

。。。我认为这会让d3感到困惑，因为您已经添加了一些路径元素，所以我将其更改为一个唯一的选择器，如

g.selectAll（'.country'）.data（countries.features）

---

我不能100%确定为什么d3会这样（也许@AndrewReid可以提供一些信息），但我从经验中了解到，在使用d3添加和更新SVG元素时使用唯一选择器是最好的做法。

您有现场演示或JSFIDLE之类的工具吗？这将有助于了解你所说的“打破地图的外观”是什么意思。公平地说，我将尝试制作一个。而且，在演示网站上，地图实际上比我的本地机器看起来更模糊。。。我想我只是需要在拖动时正确地更新所有元素，但我不知道如何做。好的。。这就是你想要的样子吗@JacobPhilpott，本周将看一看，有一些建议。