我对D3缩放有一些问题。
我用D3和topoJSON构建了一个地图,当我搜索一个城市时,地图上会出现一个点。
我使用此代码在地图上进行了约束缩放: http://bl.ocks.org/mbostock/4987520
我的所有东西都很好用,现在我尝试通过在搜索后添加缩放来改善体验。
我在这里看到了一些interessant代码:http://bl.ocks.org/mbostock/6242308
但是在两个链接上有两种不同的缩放功能,我不知道如何混合。我的代码没有错误,但缩放总是在同一点(我认为是地图的中心),即使我的点在控制台日志中返回不同的位置....不明白为什么
以下是一些代码示例:
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 + ")");
}
答案 0 :(得分:1)
您的代码中的主要问题是在缩放到该点的调用中切换了经度和纬度。除此之外,缩放工作正常。但是,当您使用地图的缩放行为时,通过此设置它比直接通过SVG变换更好。相关代码如下。
function zoomTo(location, scale) {
var point = projection(location);
zoom.scale(scale);
zoom.translate([-point[0] * scale, -point[1] * scale]);
return zoom;
}