文章/答案/技术大牛

发布

社区首页 >问答首页 >D3映射中的错误缩放-d3.行为未定义

问D3映射中的错误缩放-d3.行为未定义
EN

Stack Overflow用户

提问于 2018-01-28 06:21:52

回答 1查看 4.8K关注 0票数 8

我已经开始学习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);

和下面

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

javascript

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-28 23:32:55

正如所指出的，我使用的是一个旧版本的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)
    }));

而且起作用了！

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48483756

复制

相似问题

问D3映射中的错误缩放-d3.行为未定义
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3映射中的错误缩放-d3.行为未定义EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3映射中的错误缩放-d3.行为未定义
EN