gpt4 book ai didi

javascript - 引用错误 JS 未为 Datamap 定义

转载 作者:太空宇宙 更新时间:2023-11-04 15:58:40 25 4
gpt4 key购买 nike

在将此 html 转换为以下 js 时,我遇到了一些持续性错误:

html

<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
<style>
#map {
position: relative;
width: 100vw;
height: 100vh;
max-width:100%;
max-height:100%
}
</style>
</head>

<body>
<div id="map"></div>
<script>
var map = new Datamap({
scope: 'world',
element: document.getElementById('map')
})
</script>
</body>
</html>

js

define( [
'jquery',
'https://d3js.org/d3.v3.min.js',
'http://d3js.org/d3.geo.projection.v0.js',
'http://d3js.org/topojson.v1.min.js',
'http://datamaps.github.io/scripts/datamaps.world.min.js?v=1',
'text!./map.css'
],

function($, D3, Datamap, cssContent) {
'use strict';
$("<style>").html(cssContent).appendTo("head");
$("<meta>").html("utf-8").appendTo("head");

return {
paint: function ( $element, D3, Datamap, layout) {
try{
$element.empty();
var $map = document.createElement("div", {
"id": "map"
});
$element.append( $map );
var map = new Datamap({
scope: 'world',
element: document.getElementById('map')
})
}catch(err){
alert(err.message);
}
}
};
} );
<小时/>

js 错误

HTML(第一个片段)工作得很好,但是 js 给了我以下错误的变体:

  1. ReferenceError: d3 未定义(或任何其他 js 文件)

  2. 数据映射未定义

  3. Datamap 不是构造函数

  4. 错误:[$rootScope:inprog] $digest 已在进行中

<小时/>

到目前为止我尝试过的内容

  1. 通过require.toUrl加载paint函数中的js并jQuery.getScript,将js附加到头部,$.getScript完整的url在主函数之外
  2. 将所有js合二为一,并且将它们嵌入到主 js 中
  3. ajax js 的同步和异步方法加载中
  4. 将 js 对象添加到 function($) { : function($, D3,投影、TopoJson、数据图、cssContent){
  5. 本地引用JS文件,即define( ['jquery'、'./d3.v3.min'、'./d3.geo.projection.v0' 等...

上下文:For custom Qlik Sense extension它使用 Requirejs

最佳答案

现在已修复(我确信它仍然可以改进,但这就是现在有效的方法):

require.config({
paths: {
d3: 'https://d3js.org/d3.v3.min.js',
geo: 'http://d3js.org/d3.geo.projection.v0.js',
topojson: 'http://d3js.org/topojson.v1.min.js',
datamaps: 'http://datamaps.github.io/scripts/datamaps.world.min.js?v=1'
},
shim: {
'd3':{
exports: "d3"
},
'geo':{
deps: ["d3"]
},
'topojson':{
deps: ["d3"],
exports: "topojson"
},
'datamaps':{
deps: ["d3","topojson"],
exports: "datamaps"
}
}
});
d3 = require('d3');
define( [
'jquery',
'd3',
'geo',
'topojson',
'datamaps',
'text!./map.css'
],
function($, d3, geo, topojson, Datamap, cssContent) {
'use strict';
$("<style>").html(cssContent).appendTo("head");

return {
paint: function ( $element,layout) {
try{
$element.empty();
$('<div id="map">').appendTo($element);
var map = new Datamap({
scope: 'world',
element: document.getElementById('map')
})
}catch(err){
alert(err.message);
}
}
};
} );

关于javascript - 引用错误 JS 未为 Datamap 定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42476959/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com