Question

我已经开始研究D3了几天，我正在尝试为我做的地图添加缩放功能。

我正在使用this example as a basis，但当我尝试适应我的地图时，我收到此错误，我的地图消失了

TypeError: d3.behavior is undefined

这是我的代码：

var projection = d3.geoMercator()
.translate([width / 2, height / 2])
.scale((width - 1) / 2 / Math.PI);

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

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

var svg = d3.select("#map")
.classed("svg-cont", true)
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 560 350")
.classed("svg-content-responsive", true)
.append("g");

svg
.call(zoom)
.call(zoom.event);

以下

function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");}

Answer 1

正如所指出的，我使用的是旧版本的D3。使用d3.v4，我发现我需要做的就是插入

.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))

所以我得到了：

var svg = d3.select("#map")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 700 300")
.classed("svg-content-responsive", true)
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
;

它有效！

错误 - 放大D3地图 - d3.behavior未定义

1 个答案: