未为 Datamap 定义引用错误 JS

Question

我在将此 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 给了我以下错误的变体：

ReferenceError: d3 未定义（或任何其他 js 文件）
数据映射未定义
Datamap 不是构造函数
错误：[$rootScope:inprog] $digest 已经在进行中

到目前为止我尝试了什么

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

上下文：For custom Qlik Sense extension which uses Requirejs

Answer 1

现在已经修复（我相信它仍然可以改进，但现在是有效的）：

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);
                }               
            }
        };
    } );

未为 Datamap 定义引用错误 JS

Reference Error JS not defined for Datamap

javascript

requirejs

d3.js

topojson

qliksense

html

js

js 错误

到目前为止我尝试了什么