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

}

这导致点移动而不是基于纬度和经度保持其位置。任何帮助将不胜感激。

编辑：我忘了提到点应该保持它们的比例，也就是说即使我放大了世界地图上的点也不应该缩放，只能移动。

Answer 1

我找到了解决方案，

我忘了缩小分数：/

我添加了

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

使用地图的其余部分缩放点。

d3 SVG翻译并缩放一组，但只翻译另一组

1 个答案: