Javascript d3：使用数据地图创建美国地图_Javascript_D3.js

Javascript d3：使用数据地图创建美国地图

javascript d3.js

Javascript d3：使用数据地图创建美国地图,javascript,d3.js,Javascript,D3.js,我正在尝试使用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>

我正在尝试使用

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>

根据这个问题，我修正了这个问题：

如果我将

usa

更改为

world

，我会得到相同的错误，但是使用

equirectangle

而不是albersua

如何使此贴图渲染？谢谢

安德鲁·里德是对的，看起来像是D3版本的问题。我以前没有使用过这个库，但是能够使用这个示例（和v3 d3）获得一个简单的choropleth：


试验
var-map=新数据映射({
元素：document.getElementById（'container'），
填充：{
高：“#afafaf”，
低：“#123456”，
中等：“蓝色”，
未知：“rgb（0,0,0）”，
默认填充：“绿色”
},
数据：{
IRL：{
fillKey:'低'，
数量：2002
},
美国：{
fillKey:'中等'，
数量：10381
}
}
});

但是，我无法让您的示例使用相同的更改，因此您发布的代码可能存在更深层次的问题。

我不知道datamaps是否支持d3v4/5，如果您使用d3v3，您将能够使用d3.geo.albersUsa（由于d3.geo在v4/5中未定义，您将无法读取未定义的albersUsa属性）@AndrewReid我是否应该将第一个

中的链接更改为

v3

？谢谢在过去类似的问题上，这是一个成功的改变（当然我现在找不到）。是的，这个问题可能应该被标记为重复并关闭@SO powers

Uncaught TypeError: Cannot read property 'albersUsa' of undefined

<!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>