个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用 DataMaps 包和 d3 获取简单的美国 map 。我尝试过以下方法:
<!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。
如何渲染此 map ？谢谢
最佳答案
Andrew Reid 是对的，看起来像是 D3 版本问题。我以前没有使用过这个库，但能够使用这个示例(和 v3 d3)获得一个简单的 choropleth:
<!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>
但是，我无法让您的示例使用相同的更改，因此您发布的代码可能存在更深层次的问题。
关于javascript - d3 : Using DataMaps to create a map of the USA，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54080054/
24
4
0
我正在使用 Datamaps创建加拿大和美国的 map 。我在其网站上看到了教程和/或示例，并且看到了“仅限美国 map ”示例。我这样做了: var addUSA = ne
我正在使用 datamaps我为我的气泡设置了 mouseover 事件: map.svg.selectAll('.datamaps-bubble').on('click', function(inf
我创建了一张世界地图，使用 DataMaps . 我的目标是根据一些 API 数据在 map 上异步显示和隐藏弧线。 我已经尝试过什么 我每 5 秒调用一次我的 API 并将响应数据推送到 map 中
如何获取 d3.js 数据 map 支持的所有国家/地区的列表？ 按照 datamaps demo page 中的示例，我正在为我的 map 使用此配置: var basic = new Datama
我正在尝试使用 Bootstrap 在我的网站中嵌入 DataMap (datamaps.github.io)，并尝试使用以下代码作为测试代码。 来自http://plnkr.co/edit/W9Sb
我知道动态更改 map 的范围目前是不可能的。 所以我正在尝试: 创建 map 某些事件发生然后，我废弃 map 并绘制一张包含新细节(包括新投影)的新 map 。 问题是我无法正确废弃旧 map 。
我正在通过 DataMap 将天气数据从 Android 手机传输到 Android Wear 可穿戴设备。 我已经设法在设备上获取 DataMap，但需要找到一种方法将其转换为一个长字符串(然后拆分
我正在努力学习使用 d3js datamaps我正在努力处理动态数据。 站点中的每个示例都使用一些静态数据，编写为 javascript 对象，但我需要它是动态的。 我从一个包含一些数据的 JSON
我有一个DataMaps map ，它基于 D3.js(版本 3)，我在其中添加了滚动缩放功能。唯一的问题是我还没有找到重置它的方法。 var reset = document.getElementB
看来用这段代码: var map = null; map = new Datamap({ // Conf 1 ... }); // Draw map on DOM // Remove map
我正在扩展我的一个应用程序以使用 Android Wear，我需要向 Wear 发送 4 个位图。我正在使用 DataApi 和 DataMap 来执行此操作，目前工作正常。 我的问题是，数据在 Da
我尝试使用位于此处的数据 map 指南和插件 http://datamaps.github.io/数据图来创建他们在示例中显示的气泡。但是，气泡没有显示出来。我在代码中缺少什么。谢谢。 这是我的 js
我使用全局 map DataMaps.js .当鼠标滚轮移动时，我想实现鼠标缩放。有一个静态缩放的例子: var zoom = new Datamap({ element: document.ge
我正在开发一个 Android 可穿戴设备项目，我正在尝试将数据从移动设备发送到可穿戴设备模拟器。我正在尝试在可穿戴设备中记录接收到的数据，但它没有记录。 这些是我到目前为止所做的。 1) 打开And
我正在尝试使用 quartz 作业调度程序自动发送电子邮件。为此，我使用 jobDataMap 将完成作业所需的数据从初始化 cronTrigger 的类传递到执行作业的类。但是，当我尝试访问应该使用
我正在尝试使用带有弧和圆选项的数据图来创建网络天气图。 我遇到的基本问题是网络中存在入站和出站连接，我希望能够将它们可视化为单独的实体。为了避免传入和传出重叠，我尝试做一个简单的经度和纬度偏移(每个
我是 Backbone.js 的新手，我将其用于数据可视化，作为一个学校项目。经过几周的工作，我按照本教程实现了 require.js:http://backbonetutorials.com/org
在将此 html 转换为以下 js 时，我遇到了一些持续性错误: html #map { position: relative;
我试图将世界地图居中放置在一个全宽和全高的 div 中，但它总是溢出 div(查看 fiddle :http://jsbin.com/bifugahapa/edit?html,output) 这是我用
我正在尝试使用 DataMaps 包和 d3 获取简单的美国 map 。我尝试过以下方法: TEST var map = new Datamap({ element:
我是一名优秀的程序员,十分优秀！