我遇到了一个特定于默认墨卡托投影比例值的比例行为的问题，在我的例子中，这是一个非常荒谬的值(75000)，因为不知何故，这是我能够将 TOPOJson map 投影为项目的唯一方法作为除点之外的任何东西。
我创建了 map 投影并想要添加缩放和平移。除了默认缩放值之外，我的功能均有效。一旦滚动缩放，该值就会跳回到默认的投影比例值，而不是根据鼠标滚轮进行缩放。我有一种感觉，原因是为了让 map 显示，我需要使我的投影比例值非常高(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)
});
最佳答案
我相信您的问题是您为 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 转换的行以及对投影的修改。
关于javascript - 使用默认墨卡托投影比例的 D3 初始缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43823152/