我已经开始研究 D3 几天了,我正在尝试为我所做的地图添加缩放功能。
我使用这个例子作为基础,但是当我尝试适应我的地图时,我收到这个错误并且我的地图消失了
TypeError: d3.behavior is undefined
Run Code Online (Sandbox Code Playgroud)
这是我的代码:
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);
Run Code Online (Sandbox Code Playgroud)
而下面
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");}
Run Code Online (Sandbox Code Playgroud) 我开始研究D3以创建一个按年过滤的等值/热图.
问题:
我想显示这个topojson文件.我试图在这里调整Mike Bostock的topojson示例.但是,当我为topojson调整示例时,没有任何显示,并且控制台中没有显示错误.
我的代码看起来像这样:
var svg = d3.select("svg");
var path = d3.geoPath();
d3.json("aisp.topojson", function(error, aisp) {
if (error) throw error;
svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(aisp, aisp.objects.convert).features)
.enter().append("path")
.attr("d", path);
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(aisp, aisp.objects.convert, function(a, b) { return a !== b; })));
});
Run Code Online (Sandbox Code Playgroud)