Estoy tratando de mapear varios puntos en un globo 3D interactivo usando d3. Los puntos aparecen al principio, pero después de intentar girar el globo, desaparecen hasta que se vuelve a cargar la página. Este problema no ocurre cuando solo uso una función de panorámica/zoom.

Aquí está el código para agregar los puntos:

 d3.csv("cities.csv").then(function(data) { svg.selectAll("circle").data(data) .enter() .append("circle") .attr("class", "cities") .attr("r", 3) .attr("cx", d => projection([d.lon,d.lat])[0]) .attr("cy", d => projection([d.lon,d.lat])[1]) })

Aquí está el código para rotar:

 var mapZoom = d3.zoom() .on("zoom", zoomed); var zoomSettings = d3.zoomIdentity .translate(0, 0) .scale(120); var rotateScale = d3.scaleLinear() .domain([-500, 0, 500]) .range([-180, 0, 180]); d3.select("svg").call(mapZoom).call(mapZoom.transform, zoomSettings); function zoomed() { var e = d3.event; var currentRotate = rotateScale(e.transform.x) % 360 projection.rotate([currentRotate, 0]) .scale(e.transform.k) d3.selectAll("path.graticule").attr("d", path); d3.selectAll("path.countries").attr("d", path) .style("fill", d => newFeatureColor(d3.geoArea(d))) .style("stroke", d => d3.rgb(newFeatureColor(d3.geoArea(d))).darker()) d3.selectAll("circle.cities").each(function (d, i) { var projectedPoint = projection([dx,dy]) var x = parseInt(dx) var display = x + currentRotate < 90 && x + currentRotate > -90 || (x + currentRotate < -270 && x + currentRotate > -450) || (x + currentRotate > 270 && x + currentRotate < 450) ? "block" : "none" d3.select(this) .attr("cx", projectedPoint[0]) .attr("cy", projectedPoint[1]) .style("display", display) }) }

Este es el formato de proyección utilizado con las coordenadas cx y cy:

var proyección = d3.geoOrthographic() .scale(200) .translate([ancho/2, alto/2]) .center([0,0])

¡Cualquier ayuda sería apreciada!