Javascript D3地理地图缩放工作不正常（画布）

我试图在画布上缩放地图

var projection = d3.geoMercator()
projection.fitExtent([[margin.left, margin.top], [width, height]], land);
var path = d3.geoPath().projection(projection).context(context);

当我将平移和缩放应用到画布上下文中时，效果非常好。但是当我调用

var latlong=projection.invert（d3.mouse（this）），它并没有返回正确的纬度和经度因为投影没有相应地转换

var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .on("zoom", zoomByContext);

function zoomByContext() {
    var transform = d3.event.transform;
    context.clearRect(0, 0, width, height);
    context.save();
    context.translate(transform.x, transform.y);
    context.lineWidth = 0.5 / transform.k;
    context.scale(transform.k, transform.k);
    renderFeature();
    context.restore();
}

所以我试着像打击一样重新投射投影。但当我用下面的代码缩放时，它会转到左上角

var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .on("zoom", zoomByProjection);

function zoomByProjection() {
    var transform = d3.event.transform;
    projection.translate([transform.x, transform.y]);
    projection.scale(scale * transform.k);
    renderFeature();
}

我这样叫zoom

canvas.call(zoom, d3.zoomIdentity
.translate(projection.translate())
.scale(projection.scale()));

对于第一种方法，在将xy坐标反转为长纬度坐标之前，需要反转缩放：

var transform = d3.zoomTransform(this);
var xy = transform.invert(d3.mouse(this));         
var longlat = projection.invert(xy);

我们得到鼠标在像素坐标中的位置，将其反转为缩放坐标，然后将其反转为地理坐标

这应证明上述内容：


var宽度=960；
var高度=500；
var canvas=d3.选择（“画布”）；
var context=canvas.node（）.getContext（“2d”）
var projection=d3.geoMercator（）；
var path=d3.geoPath（投影、上下文）；
d3.json（“https://unpkg.com/world-atlas@1/world/110m.json”，函数（错误，world）{
如果（错误）抛出错误；
renderFeature（）；
var zoom=d3.zoom（）
.scaleExtent（[1，无穷大]）
.on（“缩放”，zoomByContext）；
canvas.call（缩放）；
函数zoomByContext（）{
var transform=d3.event.transform；
clearRect（0，0，宽度，高度）；
context.save（）；
翻译（transform.x，transform.y）；
context.lineWidth=0.5/transform.k；
context.scale（transform.k，transform.k）；
renderFeature（）；
restore（）；
}
函数renderFeature（）{
context.beginPath（）；
路径（topojson.mesh（world））；
stroke（）；
}
canvas.on（“单击”，函数（）{
var transform=d3.zoomTransform（此）；
var xy=transform.invert（d3.mouse（this））；
var longlat=投影。反转（xy）；
控制台日志（longlat）；
})
});