Javascript D3.js可以'；t缩放或平移平铺

我已经尝试了大约10天使用D3.js来创建地图显示矢量数据（geojson）和光栅分幅，我可以缩放和平移，但不能让它正常工作。我可以缩放和平移矢量数据，但不能缩放和平移平铺

我注意到，当我调用

tile（transform）

时，我得到了完全相同的x、y和z，尽管在转换中有我认为有意义的数字（例如{“k”：1，“x”：-35，“y”：-37}）。我搞砸了什么？我假设问题在下面的代码片段中的某个地方，尽管我还有更深入的完整代码

const tile=d3.tile（）
.范围（[[0,0]，[width，height]]）
让zoom=d3.zoom（）
.on（'zoom'，（）=>缩放（d3.event.transform））
调用（缩放）
函数缩放（变换）{
const tiles=tile（变换）；
lines.attr（'transform'，transform.toString（））
图像=图像。数据（分幅，d=>d）
.join（'image'））
.attr（'xlink:href'，d=>'https://tiles.wmflabs.org/bw-mapnik/“+d[2]+'/'+d[0]+'/'+d[1]+'.png'）
.attr（'x'，（[x]）=>（x+tiles.translate[0]）*tiles.scale）
.attr（'y'，（[，y]）=>（y+tiles.translate[1]）*tiles.scale）
.attr（'width'，tiles.scale）
.attr（‘高度’、瓷砖、比例）；
}

下面是数据和完整的脚本

{
"type": "FeatureCollection",
"name": "lines",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 3}, "geometry": { "type": "LineString", "coordinates": [ [ -74.201304101157845, 40.033790926216739 ], [ -74.201226425025339, 40.033761910802717 ], [ -74.201164135201353, 40.033738641825124 ] ] } },
{ "type": "Feature", "properties": { "id": 4}, "geometry": { "type": "LineString", "coordinates": [ [ -74.200521185229846, 40.034804885753857 ], [ -74.200535458528648, 40.034780636493231 ], [ -74.200698022608137, 40.034504451003734 ], [ -74.200932444446437, 40.034106179618831 ], [ -74.201017665586349, 40.033961391736824 ] ] } },
{ "type": "Feature", "properties": { "id": 5}, "geometry": { "type": "LineString", "coordinates": [ [ -74.243246789888346, 40.038535382572938 ], [ -74.243221882547942, 40.038496558418132 ], [ -74.243182498790546, 40.038435169141529 ], [ -74.243137176965064, 40.038364523771932 ], [ -74.243057495263045, 40.038240319569326 ], [ -74.242984178076739, 40.038126035633333 ], [ -74.242983803896664, 40.038125452375041 ], [ -74.242970932683164, 40.03810547276553 ], [ -74.242927580863451, 40.038038178902433 ] ] } }
]
}

let width=900，
高度=500，
initialScale=1缩放（d3.event.transform））
调用（缩放）
函数缩放（变换）{
const tiles=tile（变换）；
lines.attr（'transform'，transform.toString（））
图像=图像。数据（分幅，d=>d）
.join（'image'））
.attr（'xlink:href'，d=>'https://tiles.wmflabs.org/bw-mapnik/“+d[2]+'/'+d[0]+'/'+d[1]+'.png'）
.attr（'x'，（[x]）=>（x+tiles.translate[0]）*tiles.scale）
.attr（'y'，（[，y]）=>（y+tiles.translate[1]）*tiles.scale）
.attr（'width'，tiles.scale）
.attr（‘高度’、瓷砖、比例）；
}
函数绘图图（数据）{
让瓷砖=瓷砖
.scale（projection.scale（）*2*Math.PI）
.翻译（投影（[0,0]）（）；
行。选择全部（'路径'）
.数据（数据.特征）
.输入（）
.append（'路径'）
.attr（'类'，'行'）
.attr（'d'，路径）
图像=图像。数据（分幅，d=>d）
.输入（）
.append（'图像'）
.attr（'xlink:href'，d=>'https://tiles.wmflabs.org/bw-mapnik/“+d[2]+'/'+d[0]+'/'+d[1]+'.png'）
.attr（'x'，d=>（d[0]+tiles.translate[0]）*tiles.scale）
.attr（'y'，d=>（d[1]+tiles.translate[1]）*tiles.scale）
.attr（'width'，tiles.scale）
.attr（‘高度’、瓷砖、比例）；
}
d3.json（'test.geojson'）。然后（drawMap）

我发现了一种更简单的方法，通过使用D3+传单将线条放在底图的顶部。看见创造奇迹。

我发现了一种更简单的方法，通过使用D3+传单，在底图上画线。看见创造奇迹