我想阻止用户在我创建的地图上移动太远。但是，我正在努力成功应用.translateExtent()功能。
下面的简化示例（我用方块替换了地图）复制了问题。如果我删除.translateExtent()函数，代码可以工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
#svg {
background-color: rgb(239, 239, 244);
}
#shape {
fill: rgb(0, 75, 122);
stroke: white;
stroke-width: 3px;
}
#shape:hover {
fill: rgb(150, 30, 27);
}
</style>
</head>
<body>
<script>
var width = 300,
height = 300;
var container = d3.select("body").append("div");
var svg = container.append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height);
var group = svg.append("g");
var shape = group.append("rect")
.attr("id", "shape")
.attr("width", 150)
.attr("height", 150)
.attr("x", 75)
.attr("y", 75);
zoom = d3.zoom()
.scaleExtent([1, 3])
.translateExtent([0, 0], [width, height])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
change = d3.event.transform;
console.log(change)
group.attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")")
group.select("#shape").style("stroke-width", (3 / change.k) + "px");
}
</script>
</body>
</html>控制台中的错误消息是：
错误：属性转换：预期数字，“translate（NaN，NaN）scale（1）”。
我无法理解为什么平移/缩放返回x和y的'NaN'值，但它与.translateExtent()有关。我觉得我需要采取一个额外的步骤，使用当前的比例值来改变范围，但我在网上看到的所有例子似乎都不需要它。
D3.zoom translateExtent接受一个数组输入
如果指定了extent，则将translate范围设置为指定的点数组[[x0，y0]，[x1，y1]]
你提供了两个数组：
.translateExtent([0, 0], [width, height])
尝试将这些嵌套在一个数组中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
#svg {
background-color: rgb(239, 239, 244);
}
#shape {
fill: rgb(0, 75, 122);
stroke: white;
stroke-width: 3px;
}
#shape:hover {
fill: rgb(150, 30, 27);
}
</style>
</head>
<body>
<body>
<script>
var width = 300,
height = 300;
var container = d3.select("body").append("div");
var svg = container.append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height);
var group = svg.append("g");
var shape = group.append("rect")
.attr("id", "shape")
.attr("width", 150)
.attr("height", 150)
.attr("x", 75)
.attr("y", 75);
zoom = d3.zoom()
.scaleExtent([1, 3])
.translateExtent([[0, 0], [width, height]])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
change = d3.event.transform;
console.log(change)
group.attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")")
group.select("#shape").style("stroke-width", (3 / change.k) + "px");
}
</script>
</body>
</html>