[英]d3js enter is not a function issue
I am new to d3js library.我是 d3js 库的新手。 I try to drow Afrika continent contours and I have following code:我尝试绘制非洲大陆的轮廓,我有以下代码:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>geoPath measures</title>
</head>
<body>
<svg id="my_dataviz" width="400" height="300"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select('#my_dataviz');
var projection = d3.geoMercator().center([0, 5]);
var geoGenerator = d3.geoPath().projection(projection);
function update(geojson) {
svg.append("g")
.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr('d', geoGenerator);
}
d3.json('africa.json', function(err, json) {
update(json)
})
</script>
</body>
</html>
However, I get following error:但是,我收到以下错误:
Uncaught TypeError: svg.append(...).selectAll(...).data(...).enter is not a function
What is the issue?问题是什么? What I am doing wrong?我做错了什么?
Your map data is topoJson
but you are treating it as geoJson
.您的map 数据是topoJson
,但您将其视为geoJson
。 So as @AndrewReid pointed out there is no .features
property in it.因此,正如@AndrewReid 指出的那样,其中没有.features
属性。
You can use topoJson.js to convert it:您可以使用topoJson.js 对其进行转换:
<html> <meta charset="utf-8" /> <head> <title>geoPath measures</title> </head> <body> <svg id="my_dataviz" width="1000" height="1000"></svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> <script> var svg = d3.select('#my_dataviz'); var projection = d3.geoMercator().center([0, 5]); var geoGenerator = d3.geoPath().projection(projection); function update(someTopoJson) { let geojson = topojson.feature( someTopoJson, someTopoJson.objects.continent_Africa_subunits ); svg.append('g').selectAll('path').data(geojson.features).enter().append('path').attr('d', geoGenerator).attr('fill', 'steelblue'); } d3.json( 'https://raw.githubusercontent.com/deldersveld/topojson/master/continents/africa.json', function (err, json) { update(json); } ); </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.