个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 Bootstrap 在我的网站中嵌入 DataMap (datamaps.github.io)，并尝试使用以下代码作为测试代码。
来自http://plnkr.co/edit/W9SbVTm0ovffh5i7ahid?p=preview :
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js">
</script>
<script src="http://datamaps.github.io/scripts/0.4.0/datamaps.world.min.js">
</script>
<script>
$(document).ready(function () {
$("#myTab li:eq(0) a").tab('show');
});
</script>
<body>
<nav>
<ul class="nav nav-pills center-pills" role="tablist" id="myTab">
<li><a data-toggle="pill" href="#sectionA">Section A</a></li>
<li><a data-toggle="pill" href="#sectionB">Section B</a></li>
</ul>
</nav>
<div class="container">
<!--<div id="map"></div>-->
<section>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade">
<H2>sectionA</H2>
<!-- the map will appear here -->
<div id="map"></div>
</div>
<div id="sectionB" class="tab-pane fade">
<H2>sectionB</H2>
<div id="map2"></div>
</div>
</div>
</section>
<script>
$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
console.log(e);
if (e.target.href.indexOf('sectionA') > -1) {
console.log("Should Show Map!!");
}
});
var map = new Datamap({
element: document.getElementById('map'),
height: 500, width: 500
});
var map = new Datamap({
element: document.getElementById('map2'), fills: {defaultFill: "fa0af0"},
height: 500, width: 500
});
</script>
</div>
</body>
</html>
但是，这不起作用，我可以让 html 代码在浏览器中离线工作，但即使使用相同的代码，也不能在我的 Github Pages 网站上工作。在网上，我只得到一个空白页。我在其他 StackOverflow 答案中看到必须指定 map 的大小才能与 Bootstrap 一起使用，但这里指定了但仍然不显示。
我是否缺少一些脚本导入？或者还有哪些其他可能的问题？
非常感谢任何帮助!
最佳答案
您有一些任务需要完成:
删除此行:<script src="/datamaps.world.min.js"></script>
更改自 http至https您的 Assets 的网址。
希望这有帮助!
关于javascript - 如何让 DataMaps 在浏览器中显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48045282/
25
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:
我是一名优秀的程序员,十分优秀！