Question

我有一个特定于尺度行为的问题，默认的墨卡托投影比例值，在我的情况下是一个非常荒谬的值（75000），因为不知何故，这是我能够让我的TOPOJson地图成为项目的唯一方式除了点之外的任何东西。

我创建了一个地图投影，想要添加缩放和平移。我的功能工作，除了默认的缩放值。滚动到缩放后，该值会跳回到默认的投影比例值，而不是基于鼠标滚轮进行缩放。我有一种感觉，原因是因为为了让地图显示我需要使我的投影比例值非常高（75000）。

因此，当页面加载时，缩放看起来很好，例如this ...但是当您尝试平移或放大或缩小一个鼠标滚轮点击时，它会跳转到this

我试图将代码限制在下面的投影和缩放逻辑中。

<body>
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <div id = "map" style = "float : left; min-width:320px;width :50%;height : 600px;"></div>
  <script>

  var width = 900,
  height = 800;

  var projection = d3.geo.mercator()
  .center([-73.94, 40.70])
  .scale(75000)
  .translate([(width/2), (height/2)]);

  var svg = d3.select("#map").append("svg")
  .attr("viewBox", "0 0 900 800")
  .attr("preserveAspectRatio", "xMidYMid meet");

  var path = d3.geo.path()
  .projection(projection);

  var g = svg.append("g")
  .attr("transform", "translate(-793.0489643729818,-630.1796382734433)scale(3.01487286910262)");

  d3.json("ny.json", function(error, ny) {
    g.append("path")
    .attr("id", "boroughs")
    .datum(topojson.feature(ny, ny.objects.boroughs))
    .attr("d", path);

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("path")
            .attr("d", path.projection(projection));
  });

svg.call(zoom)

  });

Answer 1

我相信您的问题是您为g设置了初始缩放和翻译值，然后在缩放时重置它们。对于比例，例如：

您可以将g的比例设置为3.01以开始：

  var g = svg.append("g")
  .attr("transform", "translate(-793.0489643729818,-630.1796382734433)scale(3.01487286910262)");

但是，第一次使用d3.event进行缩放时，它会返回0.607或1.647，（缩小，放大）两者都相对于3.01缩小：

g.attr("transform","translate("+
   d3.event.translate.join(",")+")scale("+d3.event.scale+")");

这会创建您正在看到的跳转，因为比例和平移都会重置，因此与您的初始值无关。我认为翻译价值可以，但您可以在svg上调用，而不是在您指定初始翻译的g上调用。

无论如何，可能更容易在g上设置初始变换，而不是使用投影来执行此操作（而不是使用投影和变换两步中心和缩放）。这样您就可以保留所有代码不变，除了删除设置初始g转换的行以及对投影的修改。

D3初始缩放，默认为墨卡托投影比例

1 个答案: