Question

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

当我尝试放大时，它会跳到一定比例，然后通常不允许再进行缩放动作。我已经尝试了从this example和this one取得的transition，scale和scaleExtent的各种不同值（后者与我想要的非常接近）整体而言，但没有任何效果。它似乎与height/6处的实际大小非常接近，但最小变焦但仍然表现不佳。

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

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

任何人都可以帮忙

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

Answer 1

我在this bl.ock上提供了一个我想到的的例子，这是基于你指向的第一个例子。看起来这条线.scaleExtent([height, height*6])正在限制尺度（以及它的目的）与你的期望和你设定的初始尺度不相符的东西，所以当你放大超过一定水平时（在此case height ）你得到 height 和 height * 6 之间的关系。

如果你设置了最小变焦和初始变焦，我想你会解决一些问题。

点的问题是它们没有在重绘功能中引用，所以当你缩放d3 /浏览器不知道如何处理它们。在我的示例中，我将以下代码段放入以解决此问题：

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

使用d3中的元素放大地图

1 个答案: