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

rjzwgtxy  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(178)

我已经开始学习D3几天了,我试图为我做的Map添加一个缩放功能。
我使用的是this example as a basis,但当我尝试适应Map时收到此错误,并且Map消失

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 + ")");
}
icnyk63a

icnyk63a1#

正如所指出的,我使用的是旧版本的D3。

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

而且它起作用了!

相关问题