未为 Datamap 定义引用错误 JS答案

【问题标题】：Reference Error JS not defined for Datamap未为 Datamap 定义引用错误 JS
【发布时间】：2017-02-27 02:37:26
【问题描述】：

在将此 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（第一个 sn-p）工作得很好，但是 js 给了我以下错误的变体：

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

到目前为止我已经尝试过什么

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

上下文：For custom Qlik Sense extension 使用 Requirejs

【问题讨论】：

标签： javascript d3.js requirejs topojson qliksense

【解决方案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);
                }               
            }
        };
    } );

【讨论】：