0

I have a zoomable map of the world with a single point on it (in reality there are multiple points from a separate resource but I have simplified it). The block is here.

When I try and zoom in it jumps to a certain scale and then usually doesn't allow any more zooming movements. I have experimented with various different values for the transition, scale and scaleExtent taken from this example and this one (with the latter being very close to what I want overall) but nothing has worked. It seems to get quite close to the actual size at height/6 for minimum zoom but still behaves badly.

I suspect the main problem is with scaleExtent. I actually want the minimum zoom to be the size of the map and so it isn't possible to pan around unless zoomed in.

The other problem is, as you can see in the bl.ock that the circle disappears when you zoom. I want the circle to maintain position and size (so it doesn't get bigger when I zoom).

Can any one help with

  • The zoom problem on the map, so the map minimum zoom is the actual size map and I can zoom in to about 6x that
  • Preventing the map from panning unless zoomed in
  • Maintaining the size and position of the circle on the map
4

1 回答 1

1

我在这个块上放了一个我认为你所追求的例子，它基于你指出的第一个例子。看起来这条线.scaleExtent([height, height*6])将比例（以及它的目的）限制为与您的期望和您设置的初始比例不兼容的东西，所以当您放大超过某个级别（在本例中为 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");
于 2013-09-11T11:45:30.210 回答