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

Я создаю карту активности, используя 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 );

}

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

РЕДАКТИРОВАТЬ: я забыл упомянуть, что точки должны сохранять свой масштаб, то есть, даже если я увеличил масштаб карты мира, точки не должны масштабироваться, а только двигаться.


javascript svg d3.js
person Nordfjord    schedule 17.11.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Я забыл уменьшить количество баллов :/

я добавил

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

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

person Nordfjord    schedule 17.11.2014