个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 Datamaps创建加拿大和美国的 map 。我在其网站上看到了教程和/或示例，并且看到了“仅限美国 map ”示例。我这样做了:
<script>
var addUSA = new Datamap({
scope: 'usa',
element: document.getElementById('usa-map'),
geographyConfig: {
highlightOnHover: false,
borderColor: '#006298',
borderWidth: 0.8,
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
}
},
dataUrl: 'data.json',
dataType: 'json',
data: {},
fills: {
defaultFill: '#FFFFFF'
}
});
addUSA.labels();
</script>
最佳答案
所以我找到了 Mark DiMarco 在 Datamaps 中标题为 Custom Map Data 的 URL，我使用并尝试复制他所做的。在该链接上，他创建了一张阿富汗 map ，该 map 未包含在 Datamaps 网站上的主要示例中。但不是一个国家，我们将使用 Datamaps 组合两个国家的自定义 map 。这是我做的一个实验，但我希望这能解决你的问题
首先，他为阿富汗创建了一个自定义的topo json。他发布了一个关于如何创建自定义 map 数据的教程，但我认为我没有访问权限，因为我收到了 404 或者他将其删除了。回过头来看，他用于自定义拓扑 json 的代码也可以在他的其他作品中找到，位于 Datamaps 网站的“更多版本”链接。您只需要查找制作自定义地形 json 所需的国家/地区。最后，查找 datamaps.afg.js 和 datamaps.usa.js；并获取json。
我只有 1 个声望，而且我只能使用两个 URL。只需访问此 GitHub我为加拿大和美国放置了这两个自定义 topo json 的站点。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Canada and USA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- CANADA -->
<h1>CANADA</h1>
<div id="canada"></div>
<!-- USA -->
<h1>USA</h1>
<div id="usa"></div>
</body>
</html>
#canada {
border: 1px solid #000000;
height: 450px;
width: 400px;
}
#usa {
border: 2px solid #EDA552;
height: 400px;
width: 500px;
}
$(function() {
var canadaMap = new Datamap({
element: document.getElementById('canada'),
geographyConfig: {
dataUrl: 'canada.topo.json'
},
scope: 'canada',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-95, 71])
.scale(200)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
var USAmap = new Datamap({
element: document.getElementById('usa'),
geographyConfig: {
dataUrl: 'usa.topo.json'
},
scope: 'usa',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-120, 54])
.scale(250)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
});
关于datamaps - 在单个页面中使用 Datamaps 创建加拿大和美国的 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39744012/
25
4
0
以下显示而不是我模板中的字段。 我的模板有 {{ form.state }} 问题是什么？ class RegistrationForm(forms.Form): first_name =
所以我有这个正则表达式测试器: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(value); 它适用于以下情况: 123-456-
这是基本问题: 美国联邦所得税可能每年甚至年中发生变化。它们基于税表，无论您是单例还是已婚，您获得付款的频率以及您申请的免税额。以下是单例且每两周领取一次工资的纳税表示例(2013 年): Gross
我在 America/Los_Angeles TZ 上，当我尝试在 America/Mazatlan TZ 中渲染午夜时，出现以下异常: Exception in thread "main" java
我正在使用美国 map 来显示数据状态，Extension map 工作正常悬停时，我成功地为每个状态提供了值。但使用循环。 "mouseover" : function(event, data)
我正在尝试在数据集中创建一个新列，该新列依赖于数据中的两个单独的列(国家/地区和邮政编码)。如果国家/地区是“美国”，我希望新列获取邮政编码列中的数据并删除“-”后面的所有内容(仅保留前五个数字)。如
这个问题在这里已经有了答案: pytz localize vs datetime replace (4 个答案) 关闭 4 年前。 这是我的 Python 代码: import pytz from
我正在尝试为每个状态分配一种颜色，以便没有两个相邻状态共享相同的颜色 ( http://en.wikipedia.org/wiki/Four_color_theorem )。该程序将输出每个状态及其颜
给定一个州列表，如美国各州，我试图编写一个算法来判断这些州是否相邻。顺序无关紧要，可以重新访问状态。 例子: AZ, CA, OR, WA 是连续的 AZ, CA, NM, UT 是连续的 AZ, N
我正在使用 MySQL 执行一些深入的数据分析，并且希望能够创建美国的颜色编码 map ，其中将根据值范围设置各个州的颜色；有任何想法吗？管理层喜欢颜色，轻松地按地理位置汇总数据的能力对他们来说将
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 Improve th
我有一个语言切换器，它工作得很好，直到我收到用户的邮件说我的应用程序无法加载任何内容。 经过一番交谈，用户告诉我他们将 iDevice 语言设置为英语(英国)。我告诉他们将其更改为英语(美国)，然后该
使用 Mike Bostock 示例的 d3.v3 的美国 map : 我希望 map 在页面加载时最初放大到标记的位置，但应该呈现整个 map ，以便用户可以根据需要缩小。 var w = 300;
我希望我的 iOS 应用程序能够显示特定于用户当前所在州(即加利福尼亚州、俄勒冈州等)的信息。这是如何使用核心位置来完成的？ CLLocation 类具有坐标 — 如何将其转换为状态？ (仅供引用，我
我正在使用 jQuery 美国 map 插件。 在这里找到的。 https://github.com/NewSignature/us-map/ 我正在尝试添加 10 个附加按钮，它们也将与状态数据相关
我是澳大利亚的一名开发者，我正在为 Android 和 iOS 项目使用 Firebase 实时数据库。 客户提示滞后和延迟，尤其是在登录时，我正在尝试查明是否有任何 Firebase 进程默认位于美
我正在尝试找到一种使用 NSNumberFormatter 将输入数字字符串格式化为美国电话号码样式的方法。 例如:4155552671应该是+1-415-555-2671(如果我没记错的话) 我想知
该问题要求计算一周中每一天的第 13 个数。这是我的代码。 class CopyOffriday { public static void main(String[] args) throws IOE
出于学习目的，我正在尝试开发一个应用程序，它将在 MKMapView 上显示到特定点的方向。 但是，无论地址如何，DirectionsResponse 每次都会给我以下错误: 2013-12-28 1
我有一个非常简单的登录页面(登录名+密码)。 我的用户是法国人，所以他们的键盘是法语 (azerty)。 从 iOS 12 开始，当他们点击 protected 密码文本字段时，键盘会切换为英语 (q
我是一名优秀的程序员,十分优秀！