旋转地图会破坏样式

Question

我正在尝试旋转一个球体(正交投影)。我现在所拥有的确实旋转了全球，尽管它非常起伏不定，并且它打破了我拖动它(网格和海洋填充)后地图的外观

我如何改进我的代码使其更好?以下是相关代码:

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

编辑:实时演示:https://vizhub.com/Glebenator/f44ac266b14f4c92b88113fcc89c389d?edit=files&file=index.html

Answer 1

我做了两件事。

1. 在dragged函数内部，而不是选择所有的路径元素作为一个，我选择了它们单独…因此将svg.selectAll("path").attr("d", pathGenerator)行替换为svg.selectAll(".graticule").attr("d", pathGenerator)和svg.selectAll(".country").attr("d", pathGenerator)。

2. 当您添加使用selectAll('path')的国家时，如g.selectAll('path').data(countries.features)…我认为这混淆了d3，因为你已经附加了一些路径元素，所以我把它改成了一个唯一的选择器，像g.selectAll('.country').data(countries.features)。

我不是100%确定为什么d3的行为是这样的(也许@AndrewReid可以透露一些光)，但我从经验中学到，最好的做法是使用唯一的选择器时追加和更新SVG元素与d3。