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

Question

我几天前开始学习D3，并尝试为我做的地图添加缩放功能。

我正在使用这个示例作为基础，但当我尝试适应我的地图时，我收到了这个错误，而且我的地图消失了。

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);

And below

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

- abaporu

---

您正在使用 D3 v4 版本。在该版本中，d3.behavior.zoom 已被移除，改为使用 d3.zoom。请注意更新相关代码。 - Gerardo Furtado

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)
    }));

它有效！

- abaporu