javascript - 没有为Datamap定义参考错误JS - Thinbug

没有为Datamap定义参考错误JS

时间：2017-02-27 02:37:26

标签： javascript d3.js requirejs topojson qliksense

在将此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文件）
未定义数据图
数据图不是构造函数
错误：[$ rootScope：inprog] $ digest已在进行中

到目前为止我尝试了什么

通过require.toUrl和。在paint函数中加载js jQuery.getScript，将js追加到head，$ .getScript是完整的url 在主要功能之外
将所有js合并为一个，也是将它们嵌入主js
ajax js的同步和异步方法正在加载
将js对象添加到函数（$）{：function（$，D3， Projection，TopoJson，Datamaps，cssContent）{
在本地引用JS文件，即定义（[ ＆＃39; jquery＆＃39;，＆＃39; ./ d3.v3.min＆＃39;，＆＃39; ./ d3.geo.projection.v0＆＃39;等...

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

1 个答案:

答案 0 :(得分：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);
                }               
            }
        };
    } );