用 d3 中的元素放大地图

Question

我有一个可缩放的世界地图，上面有一个点（实际上有多个点来自一个单独的资源，但我已经简化了它）。 The block is here.

当我尝试放大时，它会跳转到某个比例，然后通常不允许再进行任何缩放动作。我已经为transition、scale 和scaleExtent 尝试了各种不同的值，这些值取自this example 和this one（后者与我想要的整体非常接近），但没有任何效果。对于最小缩放，它似乎非常接近height/6 的实际尺寸，但仍然表现不佳。

我怀疑主要问题出在scaleExtent。我实际上希望最小缩放为地图的大小，因此除非放大，否则无法平移。

另一个问题是，正如您在 bl.ock 中看到的那样，当您缩放时圆圈会消失。我希望圆圈保持位置和大小（所以当我缩放时它不会变大）。

谁能帮忙

• 地图上的缩放问题，所以地图最小缩放是实际大小的地图，我可以放大到大约6倍
• 除非放大，否则防止地图平移
• 维护地图上圆圈的大小和位置

Answer 1

我在this bl.ock 上放了一个我认为你所追求的例子，这是基于你指出的第一个例子。看起来这条线.scaleExtent([height, height*6]) 将比例（以及它的目的）限制为与您的期望和您设置的初始比例不兼容的东西，所以当您放大超过某个级别时（在这种情况下 height) 你会被困在 height 和 height * 6 之间。

如果您设置最小缩放和初始缩放，我认为您会解决一些问题。

点的问题是它们没有在重绘函数中被引用，所以当你缩放 d3 / 浏览器不知道如何处理它们。在我的示例中，我放入了以下 sn-p 来解决这个问题：

g.selectAll("circle")
    .attr("cx", function (d,i) { return projection(d)[0]; })
    .attr("cy", function (d,i) { return projection(d)[1]; })
    .attr("r", "10px")
    .style("fill", "red");