Как обновить проекцию d3, чтобы она соответствовала преобразованию масштабирования?

Перечитывая свой вопрос поближе, вы можете усложнить проблему. Масштаб и сдвиг проекции могут быть полностью независимыми от состояния масштабирования SVG.

Связывание одного с другим создает больше проблем, чем оно того стоит, отчасти потому, что у вас увеличивается количество динамических систем координат, отчасти потому, что вам может потребоваться постоянно выполнять такие действия, как пересчет проецируемых точек во время событий перетаскивания (в зависимости от подхода, который может быть запаздывающим).

Насколько я понимаю проблему, ваши пути SVG масштабируются, но вам нужно извлекать, взаимодействовать, обновлять или отображать определенные точки и/или элементы, не являющиеся путями, в SVG, чтобы отразить их новое местоположение.

Почему бы не использовать тот же подход для кругов/точек/других элементов, что и для путей? Для этого я бы создал новый g для хранения всех масштабируемых элементов, путей и прочего, применил к нему преобразование масштабирования, таким образом масштабирование само позаботится обо всем масштабировании за вас:

let zoomG = svg.append('g');

zoom.on('zoom', (ev) => {
   zoomG.attr('transform', ev.transform);  
 })

Любые координаты дочерних элементов внутри ZoomG будут представлены с использованием значений пикселей проекции. Затем ZoomG преобразуется в целом в соответствии с масштабом.

Например, ниже показаны некоторые пути и начальный круг (Лондон). Независимо от состояния масштабирования Сингапур будет отображаться правильно при щелчке в любом месте карты (он исчезнет через несколько секунд, пока не будет выполнено повторное нажатие), в то время как существующие объекты будут правильно панорамированы и масштабированы.

var svg = d3.select("svg")
  .attr("width", 500)
  .attr("height", 500)

var projection = d3.geoMercator()
    .scale(500 / 2 /Math.PI )
    .translate([250,250])
    
let zoomG = svg.append('g');

let zoom = d3.zoom()
  .on("zoom", (ev)=> zoomG.attr('transform', ev.transform))

  
svg.call(zoom);
  
svg.on("click", function(ev) {
    let xy = d3.pointer(ev, zoomG.node());
    let longlat = projection.invert(xy);
    console.info("mouse click at: " + xy + " which represents: " + longlat);
    
   zoomG.append("circle")
     .attr("cx", projection([103.820,1.352])[0])
     .attr("cy", projection([103.820,1.352])[1])
     .attr("r", 4)
     .transition()
     .attr("r", 0)
     .duration(2000)
     .remove();
    
})
  

d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data){
    
   zoomG.selectAll("path")
        .data(data.features)
        .enter().append("path")
            .attr("fill", "#eee")
            .attr("d", d3.geoPath()
               .projection(projection)
            )
            .style("stroke", "#ccc")
            
   zoomG.append("circle")
     .attr("cx", projection([0.128,51.507])[0])
     .attr("cy", projection([0.128,51.507])[1])
     .attr("r", 4)
     
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<svg></svg>

Выше я также добавил демонстрацию того, как вычислить географическое положение мыши.

let xy = d3.pointer(ev, zoomG.node());
let longlat = projection.invert(xy);
console.info("mouse click at: " + xy + " which represents: " + longlat);

Нам не нужно беспокоиться об этом при переходе от проекционных координат к пиксельным координатам, поскольку вложение путей/кругов/что угодно в родительский G с преобразованием масштабирования позаботится об этом за нас. Но, двигаясь в обратном направлении, нам нужно рассмотреть преобразование масштабирования в том месте, где мышь фактически находится в проецируемом координатном пространстве (именно здесь на помощь приходит d3.pointer).