在D3 v4中使用zoom.translateExtent约束地图平移

Question

我正在尝试显示单个状态的地图,缩放和平移约束到状态的边界.它主要工作,除了平移约束时状态路径缩放以适应较小的容器.我认为这归结于我不理解使用什么参数zoom.translateExtent(虽然我对此很新,所以它可能是其他的东西).

bl.ocks.org上的实例,包含现有技术的链接.

一个值得注意的事情是我正在使用空投影d3.geoPath,因为我曾经ogr2ogr在每个状态的投影坐标中生成一个shapefile.这就是我使用缩放变换使地图适合其容器的原因.

Answer 1

@McGiogen的解决方案几乎是正确的，但是没有MIN根据缩放比例系数而有所不同transform.k。

我绘制了一个图表，以查看如何限制svg始终包含在缩放视图内（在我的图形中显示为较大的框，用户只能看到其中的一部分）：

（由于约束条件x+kw >= w等价于x >= (1-k)w，对于，其参数类似y）

因此，假设您的svg容器尺寸为[w, h]：

function zoomed() {
    var t = d3.event.transform;

    t.x = d3.min([t.x, 0]);
    t.y = d3.min([t.y, 0]);
    t.x = d3.max([t.x, (1-t.k) * w]);
    t.y = d3.max([t.y, (1-t.k) * h]);

    svg.attr("transform", t);
}

Answer 2

我今天遇到了同样的问题，并且做了一些测试。

我注意到，当你有一个小于内容的 elements 的 translateExtent 框时，会发生同样奇怪的行为。

在你的（和我的）代码中，缩小会触发相同的行为：如果你正确设置了translateExtent框并且没有缩放，这并不重要，如果你缩小，框会以比元素更高的速率缩小，并且在某些情况下会缩小。点你的translateExtent框将小于内容（以及奇怪的行为）。

我暂时解决了这个问题，正如这里所说的 D3 平移+缩放约束

var MIN = {x: 0, y: -500},     //top-left corner
    MAX = {x: 2000, y: 500};   //bottom-right corner

function zoomed() {
   var transform = d3.event.transform;

   // limiting tranformation by MIN and MAX bounds
   transform.x = d3.max([transform.x, MIN.x]);
   transform.y = d3.max([transform.y, MIN.y]);
   transform.x = d3.min([transform.x, MAX.x]);
   transform.y = d3.min([transform.y, MAX.y]);

   container.attr("transform", transform);
}

我仍然是 d3 新手，但我认为这是 translateExtent 代码中的一个错误。