Question

我正在使用D3地球投影。如果我添加缩放但不在变焦时变换地球，则地球会放大到svg容器的左上角。如果我在缩放时添加平移，以便它放大到中心，则旋转停止工作，因为它与缩放平移冲突。

我尝试去除旋转，它工作正常，但我需要让地球旋转。有没有办法修复地球，以便翻译只适用于缩放，并且不会在旋转时平移地球。

对于缩放，我使用以下代码：

  var zoom = d3.behavior.zoom()
    .translate([width / 2, height / 2])
    .scale(scale0)
    .scaleExtent([scale0, 8 * scale0])
    .on("zoom", zoomed);

以及拖动时的旋转：

.call(d3.behavior.drag()
  .origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; })
  .on("drag", function() {
    var rotate = projection.rotate();
    projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
    svg.selectAll("path.land").attr("d", path);
    svg.selectAll(".focused").classed("focused", focused = false);
  }))

codepen位于此处：https://codepen.io/kvyb/pen/vdmxBe

我尝试通过增加灵敏度使阻力比翻译强，但这似乎是一个非常糟糕的解决方案。

有关使用帖子标题中的功能实现稳定地球的任何提示吗？

仅使用缩放和旋转的地球投影

0 个答案: