文章/答案/技术大牛

发布

社区首页 >问答首页 >d3:使用DataMaps创建美国地图

问d3:使用DataMaps创建美国地图
EN

Stack Overflow用户

提问于 2019-01-08 02:46:32

回答 1查看 220关注 0票数 0

我正在尝试使用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>

我想我在上面的链接中搞砸了(我已经在NPM上安装了DataMaps )。我不认为我命中的是正确的d3版本或该领域中的某些东西。

现在我只得到这个错误：

Uncaught TypeError: Cannot read property 'albersUsa' of undefined

根据这个问题，我修复了它：albersUsa fix

如果我将usa更改为world，我会得到相同的错误，但使用equirectangular而不是albersUsa。

如何渲染此贴图？谢谢

javascript

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-08 03:11:11

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>

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54080054

复制

相似问题

问d3:使用DataMaps创建美国地图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3:使用DataMaps创建美国地图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3:使用DataMaps创建美国地图
EN