d3 SVG перевод и масштабирование одной группы, но только перевод другой

Question

Я строю карту действий с помощью d3. Я показываю карту мира, а затем некоторые точки, которые представляют активность. Карта должна быть как панорамируемой, так и масштабируемой.

функции я использую для преобразования в данный момент выглядит следующим образом:

function move() { 

    var t = d3.event.translate; 
    var s = d3.event.scale; 
    var h = height/4; 


    t[ 0 ] = Math.min(
     (width/height) * (s - 1), 
     Math.max(width * (1 - s), t[ 0 ]) 
    ); 

    t[ 1 ] = Math.min(
     h * (s - 1) + h * s, 
     Math.max(height * (1 - s) - h * s, t[ 1 ]) 
    ); 

    zoom.translate(t); 
    ctrl.g.attr('transform', 'translate(' + t + ')scale(' + s + ')'); 
    ctrl.points.attr('transform', 'translate(' + t + ')'); 

    //adjust the country hover stroke width based on zoom level 
    d3.selectAll('.country').style('stroke-width', 1.5/s); 

} 

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

EDIT: Я забыл упомянуть, что точки должны поддерживать свой масштаб, то есть, хотя я увеличил масштаб карты мира, точки не должны масштабироваться, а двигаться.

Answer 1

Я нашел свое решение,

я забыл сворачивать точки:/

Я добавил

d3.selectAll('.point').attr('r', 5/s); 

масштабировать точки с остальной частью карты.