Javascript D3.js缩放到二维地图中的点(投影)

Javascript D3.js缩放到二维地图中的点(投影),javascript,d3.js,Javascript,D3.js,我对D3的缩放有些问题 我用D3和topoJSON构建了一张地图,当我搜索一个城市时,地图上会出现一个点 我使用以下代码在地图上进行约束缩放: 我所有的东西都很好用,现在我尝试通过在搜索后添加点缩放来改善体验 我在这里看到了一些有趣的代码: 但是在两个链接上有两个不同的缩放功能,我不知道如何混合。我的代码没有错误,但缩放始终在同一点(我认为是地图的中心),即使我的点在控制台日志中返回不同的位置。。。。不明白为什么 以下是一些代码示例: var zoom = d3.behavior.zoom()

我对D3的缩放有些问题

我用D3和topoJSON构建了一张地图,当我搜索一个城市时,地图上会出现一个点

我使用以下代码在地图上进行约束缩放:

我所有的东西都很好用,现在我尝试通过在搜索后添加点缩放来改善体验

我在这里看到了一些有趣的代码:

但是在两个链接上有两个不同的缩放功能,我不知道如何混合。我的代码没有错误,但缩放始终在同一点(我认为是地图的中心),即使我的点在控制台日志中返回不同的位置。。。。不明白为什么

以下是一些代码示例:

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 30])
    .on("zoom", move);

 var path = d3.geo.path()
    .projection(projection);

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .call(zoom);

 var g = svg.append("g");

//This is called when ajax research
function setPlaces(jsonData){
    ... code stuff
    var point = [authors[0].birth_place.lon, authors[0].birth_place.lat];
    svg.transition().call(zoomTo(point, 4).event);
}

function zoomTo(location, scale) {
    var point = projection(location);
    return zoom
       .translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
       .scale(scale);
}

function move() {
var t = d3.event.translate,
        s = d3.event.scale;
t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
zoom.translate(t);
g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}

代码中的主要问题是在缩放到该点的调用中切换了经度和纬度。除此之外,缩放效果良好。但是,当您使用地图的缩放行为时,通过此设置要比直接通过SVG转换设置好。相关代码如下

function zoomTo(location, scale) {
  var point = projection(location);

  zoom.scale(scale);
  zoom.translate([-point[0] * scale, -point[1] * scale]);

  return zoom;
}

你看到了吗?是的,但没有用:/我发布的第二个链接是我想要的,但我在地图上已经有了另一种缩放类型(平移+缩放),我尝试混合这两种类型,但没有成功编辑帖子,现在我在示例中单击的
函数中得到了一个缩放,但始终位于同一点(地图中心)wtf,请看最后一段代码
k
是你的比例因子,
x
y
是你要放大的点的投影坐标。这已经是我在我的代码上看到的缩放,同样的。完美!谢谢