D3.js 在D3中使用.translateExtent返回'；楠'；x&；缩放时的y值

我希望防止用户平移到离我创建的地图太远的地方。但是，我很难成功地应用

.translateExtent（）

函数

下面的简化示例（我用正方形替换了地图）复制了这个问题。如果我删除

.translateExtent（）

函数，代码就会工作

#svg{
背景色：rgb（239239244）；
}
#形状{
填充：rgb（0,75,122）；
笔画：白色；
笔画宽度：3px；
}
#形状：悬停{
填充：rgb（150、30、27）；
}
可变宽度=300，
高度=300；
var container=d3.选择（“主体”）.追加（“div”）；
var svg=container.append（“svg”）
.attr（“id”、“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var group=svg.append（“g”）；
var shape=group.append（“rect”）
.attr（“id”、“形状”）
.attr（“宽度”，150）
.attr（“高度”，150）
.attr（“x”，75）
.attr（“y”，75）；
zoom=d3.zoom（）
.scaleExtent（[1,3]）
.translateExtent（[0,0]，[width，height]）
。打开（“缩放”，缩放）；
调用（缩放）；
函数缩放（）{
change=d3.event.transform；
console.log（更改）
group.attr（“transform”、“translate”（++[change.x，change.y]+）比例（“+change.k+”）
组。选择（“#形状”）.style（“笔划宽度”，（3/change.k）+“px”）；
}

D3.zoom

translateExtent

采用一个数组作为输入

如果指定了范围，则将转换范围设置为指定的范围 点阵列[[x0，y0]，[x1，y1]]

您提供了两个阵列：

.translateExtent([0, 0], [width, height])

尝试将它们嵌套在阵列中：

#svg{
背景色：rgb（239239244）；
}
#形状{
填充：rgb（0,75,122）；
笔画：白色；
笔画宽度：3px；
}
#形状：悬停{
填充：rgb（150、30、27）；
}
可变宽度=300，
高度=300；
var container=d3.选择（“主体”）.追加（“div”）；
var svg=container.append（“svg”）
.attr（“id”、“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var group=svg.append（“g”）；
var shape=group.append（“rect”）
.attr（“id”、“形状”）
.attr（“宽度”，150）
.attr（“高度”，150）
.attr（“x”，75）
.attr（“y”，75）；
zoom=d3.zoom（）
.scaleExtent（[1,3]）
.translateExtent（[[0,0]，[width，height]]
。打开（“缩放”，缩放）；
调用（缩放）；
函数缩放（）{
change=d3.event.transform；
console.log（更改）
group.attr（“transform”、“translate”（++[change.x，change.y]+）比例（“+change.k+”）
组。选择（“#形状”）.style（“笔划宽度”，（3/change.k）+“px”）；
}

噢，该死的，再次感谢你！这很尴尬-这不是我第一次把两个方括号错当成一个。。。