Uncaught TypeError: n is not a function d3.js. While trying to overlay us_map on google maps
Uncaught TypeError: n is not a function d3.js. While trying to overlay us_map on google maps
我正在尝试将具有不同州的美国地图叠加在 google 地图上。我知道我可以使用 Google 地图的 loadGeoJson
功能,但我想为不同的州着色。
这是我正在尝试的代码。我在粘贴代码时删除了 API-Key。
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key="></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Create the Google Map…
d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(json) {
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 3,
center: new google.maps.LatLng(12.9716, 77.59),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var overlay=new google.maps.OverlayView();
overlay.onAdd=function(){
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
overlay.draw = function() {
var projection = this.getProjection();
padding = 10;
var path=d3.geo.path().projection(projection);
var states = layer.append("svg") //svg width and height needs to be set.
.append("g")
.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.attr("fill","blue");
};
};
overlay.setMap(map);
});
</script>
我收到以下错误。
此错误已在 jquery 部分中得到解决,其中 $ 符号显然是问题所在,必须将其删除。但是,我找不到 d3 的解决方案。
d3.v3.min.js:2 Uncaught TypeError: n is not a function
at http://d3js.org/d3.v3.min.js:2:870
at u (http://d3js.org/d3.v3.min.js:1:31886)
at Object.c [as point] (http://d3js.org/d3.v3.min.js:2:43)
at Object.point (http://d3js.org/d3.v3.min.js:2:2392)
at pt (http://d3js.org/d3.v3.min.js:1:19817)
at gt (http://d3js.org/d3.v3.min.js:1:19916)
at Object.Polygon (http://d3js.org/d3.v3.min.js:4:1080)
at ht (http://d3js.org/d3.v3.min.js:1:19734)
at Object.Feature (http://d3js.org/d3.v3.min.js:4:601)
at Object.ao.geo.stream (http://d3js.org/d3.v3.min.js:4:556)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1(anonymous function) @ js?libraries=places&key=MYKEY:112
d3.v3.min.js:2 Uncaught TypeError: n is not a function(…)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1_.zf.B @ js?libraries=places&key=MYKEY:112_.z.trigger @ js?libraries=places&key=.......
首先,您的错误 n is not a function
与您引用的 jquery 错误无关。由于 minification 个脚本,它们很相似。
不过,为了回答您的问题,google 地图投影与 d3
投影不同。你必须将一个翻译成另一个。不过这很简单:
var projection = this.getProjection();
var g2d3Proj = function(coor) {
var gCoor = new google.maps.LatLng(coor[1], coor[0]),
pCoor = projection.fromLatLngToDivPixel(gCoor);
return [pCoor.x, pCoor.y];
}
var path = d3.geo.path().projection(g2d3Proj);
我在查看您的代码时注意到的其他事项:
- 您正在 CSS 中将
svg
height/width 设置为 60x20px。这对于您的地图来说太小了。
- 我不会在叠加绘制中附加
svg
。附加它 onAdd
,这样您就不会在平移或缩放时继续重新附加。
- 您没有正确处理 enter/update 选择,因此平移地图或缩放不会重绘叠加层。
- 您正在绘制美国各州,但您的地图以印度附近为中心。
解决所有这些问题会产生以下结果:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations,
.stations svg {
position: absolute;
width: 1000px;
height: 1000px;
}
</style>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//d3js.org/d3.v3.js"></script>
<script>
d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(error, json) {
if (error) console.warn(error);
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 3,
center: new google.maps.LatLng(39, -98),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
var svg = layer.append("svg");
overlay.draw = function() {
var projection = this.getProjection();
var projection = this.getProjection();
var g2d3Proj = function(coor) {
var gCoor = new google.maps.LatLng(coor[1], coor[0]),
pCoor = projection.fromLatLngToDivPixel(gCoor);
return [pCoor.x, pCoor.y];
}
var path = d3.geo.path().projection(g2d3Proj);
var states = svg
.selectAll("path")
.data(json.features);
states
.enter().append("path");
states
.attr("d", path)
.attr("fill", "blue");
};
};
overlay.setMap(map);
});
</script>
我正在尝试将具有不同州的美国地图叠加在 google 地图上。我知道我可以使用 Google 地图的 loadGeoJson
功能,但我想为不同的州着色。
这是我正在尝试的代码。我在粘贴代码时删除了 API-Key。
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key="></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Create the Google Map…
d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(json) {
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 3,
center: new google.maps.LatLng(12.9716, 77.59),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var overlay=new google.maps.OverlayView();
overlay.onAdd=function(){
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
overlay.draw = function() {
var projection = this.getProjection();
padding = 10;
var path=d3.geo.path().projection(projection);
var states = layer.append("svg") //svg width and height needs to be set.
.append("g")
.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.attr("fill","blue");
};
};
overlay.setMap(map);
});
</script>
我收到以下错误。 此错误已在 jquery 部分中得到解决,其中 $ 符号显然是问题所在,必须将其删除。但是,我找不到 d3 的解决方案。
d3.v3.min.js:2 Uncaught TypeError: n is not a function
at http://d3js.org/d3.v3.min.js:2:870
at u (http://d3js.org/d3.v3.min.js:1:31886)
at Object.c [as point] (http://d3js.org/d3.v3.min.js:2:43)
at Object.point (http://d3js.org/d3.v3.min.js:2:2392)
at pt (http://d3js.org/d3.v3.min.js:1:19817)
at gt (http://d3js.org/d3.v3.min.js:1:19916)
at Object.Polygon (http://d3js.org/d3.v3.min.js:4:1080)
at ht (http://d3js.org/d3.v3.min.js:1:19734)
at Object.Feature (http://d3js.org/d3.v3.min.js:4:601)
at Object.ao.geo.stream (http://d3js.org/d3.v3.min.js:4:556)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1(anonymous function) @ js?libraries=places&key=MYKEY:112
d3.v3.min.js:2 Uncaught TypeError: n is not a function(…)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1_.zf.B @ js?libraries=places&key=MYKEY:112_.z.trigger @ js?libraries=places&key=.......
首先,您的错误 n is not a function
与您引用的 jquery 错误无关。由于 minification 个脚本,它们很相似。
不过,为了回答您的问题,google 地图投影与 d3
投影不同。你必须将一个翻译成另一个。不过这很简单:
var projection = this.getProjection();
var g2d3Proj = function(coor) {
var gCoor = new google.maps.LatLng(coor[1], coor[0]),
pCoor = projection.fromLatLngToDivPixel(gCoor);
return [pCoor.x, pCoor.y];
}
var path = d3.geo.path().projection(g2d3Proj);
我在查看您的代码时注意到的其他事项:
- 您正在 CSS 中将
svg
height/width 设置为 60x20px。这对于您的地图来说太小了。 - 我不会在叠加绘制中附加
svg
。附加它onAdd
,这样您就不会在平移或缩放时继续重新附加。 - 您没有正确处理 enter/update 选择,因此平移地图或缩放不会重绘叠加层。
- 您正在绘制美国各州,但您的地图以印度附近为中心。
解决所有这些问题会产生以下结果:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations,
.stations svg {
position: absolute;
width: 1000px;
height: 1000px;
}
</style>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//d3js.org/d3.v3.js"></script>
<script>
d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(error, json) {
if (error) console.warn(error);
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 3,
center: new google.maps.LatLng(39, -98),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
var svg = layer.append("svg");
overlay.draw = function() {
var projection = this.getProjection();
var projection = this.getProjection();
var g2d3Proj = function(coor) {
var gCoor = new google.maps.LatLng(coor[1], coor[0]),
pCoor = projection.fromLatLngToDivPixel(gCoor);
return [pCoor.x, pCoor.y];
}
var path = d3.geo.path().projection(g2d3Proj);
var states = svg
.selectAll("path")
.data(json.features);
states
.enter().append("path");
states
.attr("d", path)
.attr("fill", "blue");
};
};
overlay.setMap(map);
});
</script>