Question

我有一张我在codepen上创建的D3地图。以下是链接

http://codepen.io/redixhumayun/full/VPepqM/

我已经包含了一些基本的缩放和平移。但是，当我缩放时，我希望点重新缩放以考虑缩放，而不是保持相同的大小。我希望它们能够在放大后提供的更大区域上分开。

我不确定到底应该找到什么，这就是为什么我很难找到它。

以下是我目前实施的缩放代码

var zoom = d3.zoom()
             .on('zoom', zoomed);

svg.call(zoom);

//defining the zoomed function here
function zoomed() {
  map.attr('transform', d3.event.transform)
  meteorite.attr('transform', d3.event.transform);
}

Answer 1

如果您希望代表陨石的圆圈保持其原始尺寸，无论缩放如何，这都是可能的解决方案：

重命名您的圈子＆＃39;变量：

var meteorites = meteorite.selectAll('circle')
    //etc..

根据缩放设置半径和笔划：

meteorites.attr('r', function(d) {
        return weight_scale(d.properties.mass) / d3.event.transform.k
    })
    .attr("stroke-width", 1 / d3.event.transform.k);

以下是CodePen：http://codepen.io/anon/pen/VPapPa?editors=1010

PS：由于范围问题，我不得不移动一些功能。

如何在缩放后重新缩放D3地图

1 个答案: