我正在尝试使用DataMaps
软件包和d3建立一个简单的美国地图。我尝试了以下方法:
<!DOCTYPE html>
<html>
<head>
<title> TEST </title>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="node_modules/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
var map = new Datamap({
element: document.getElementById('container'),
scope: 'usa'
})
var projection = d3.geoAlbers()
</script>
我想我在上面的链接中搞砸了(并且我已经将DataMaps
与NPM
一起安装了)。我认为我没有达到正确的d3版本或该领域的某些功能。
现在我只收到此错误:
Uncaught TypeError: Cannot read property 'albersUsa' of undefined
我根据以下问题解决了这个问题:albersUsa fix
如果我将usa
更改为world
,则会收到相同的错误,但使用equirectangular
而不是albersUsa。
如何获取此地图?谢谢
答案 0 :(得分:1)
安德鲁·里德(Andrew Reid)是对的,它看起来像是D3版本的问题。我以前没有使用过该库,但是可以使用此示例(和v3 d3)进行简单的调整:
<!DOCTYPE html>
<html>
<head>
<title> TEST </title>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="node_modules/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
var map = new Datamap({
element: document.getElementById('container'),
fills: {
HIGH: '#afafaf',
LOW: '#123456',
MEDIUM: 'blue',
UNKNOWN: 'rgb(0,0,0)',
defaultFill: 'green'
},
data: {
IRL: {
fillKey: 'LOW',
numberOfThings: 2002
},
USA: {
fillKey: 'MEDIUM',
numberOfThings: 10381
}
}
});
</script>
但是,我无法让您的示例进行相同的更改,因此您发布的代码可能存在更深层次的问题。