在require.js模塊中使用D3.JS和sankey插件

Question

我正在嘗試構建一個requirejs模塊，為客戶端代碼提供使用d3.js渲染內容的選項。 我要使用的第一個插件是sankey圖 。 到目前為止，我的模塊：

define(['d3'], function(ignore) {

    console.log("bef", d3);
    require(['sankey.js']);
    console.log("aft", d3);
    d3.sankey();

    return {
        ...
        d3: d3,
        renderSankey: function(options) {
           ...
        }
    }

sankey.js腳本使用全局d3變量，並添加了函數sankey() 。 （我嘗試了btw， define(['d3'], function(ignore)和define(['d3'], function(d3) ，結果完全相同。）。錯誤： TypeError: d3.sankey is not a function ，無論我嘗試在代碼顯示時直接調用它還是在renderSankey函數中調用this.d3.sankey() 。

控制台輸出說（兩次，在require(...)調用之前和之后：

sankey: d3.sankey()

不管我嘗試什么，都行不通。 我感覺好像錯過了一些有關陰影的JS，但是為什么當我console.log對象並在一排之后，當我嘗試調用時遇到錯誤時，為什么會有一個sankey函數？ 我究竟做錯了什么？

信息：

• 我在一個splunk html儀表板中使用它，這可能很重要...
• 我不希望客戶端代碼導入依賴項（大約有100個插件要來，這很痛苦）
• 當我僅將sankey.js的內容復制到模塊中時，一切正常

/ edit：這是Require配置（由Splunk儀表板提供）

require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0 // Disable require.js load timeout
});

Answer 1

您用於加載sankey的require調用是異步的。 它將啟動sankey的加載，但是在require返回時，不會加載sankey 。 您應該將代碼更改為：

define(['d3', 'sankey'], function (d3) {
    d3.sankey();

我認為d3還會在全局空間中泄漏符號d3 ，但是AMD模塊不應依賴全局符號，除非它們是運行時環境的一部分（例如window ， document ）。

您還需要設置RequireJS配置，以使sankey依賴於d3因為上面的define 本身並不確保d3將在sankey之前sankey 。 因此，您需要在配置中執行以下操作：

shim: {
    sankey: ['d3']
}

這使得sankey依賴於d3 。 （請注意， shim只能用於影響不是正確的AMD模塊的文件的加載sankey不會調用define來進行自身注冊，因此不是合適的AMD模塊，我們可以使用shim來實現。）

另外，模塊名稱中通常不應包含.js ，因此，當您要加載插件時，請將其加載為sankey而不是sankey.js 。

Answer 2

好的，我想@Louis和我只是互相誤解了。 這可能是由於我自己的愚蠢造成的，因為我不知道可以在任何地方（而不是在根文件中僅一次）進行require.js的配置。 但是，為了獲得Splunk的特定部分，我發布了此答案（而不是接受Louis'）：

我在splunk環境中添加了一個新應用程序（即viz應用程序）。 我實際上首先配置了依賴項（在其他splunk應用程序可加載的d3-viz模塊中）：

require.config({
    paths: {
        'd3': '../app/D3_Viz/d3',         // d3.js
        'sankey': '../app/D3_Viz/sankey', // sankey.js 
        'XYZ': 'all the paths go here'
    },
    shim: {
        'sankey': ['d3'],
        'XYZ': ['d3'],
         // all the dependecies go here
    }
});

define(['splunkjs/ready!', 'jquery', 'd3'],
    function(mvc, $, ignore) {

    var d3Vis =  {
        ...
        renderSankey: function(options) {
            // load dependencies dynamically 
            require(['sankey'], function() {
                // actually render things
            });
        },
        renderXYZ: function(options) {
            require(['XYZ'], function() {
                ...
            });
        },
        ...


        }
    }
    return d3Vis;

我所有的依賴項都可以在viz-app中配置（而不是在使用該應用程序的客戶端代碼中配置，這是我對require.js的基本誤解）； 唯一要做的就是整體加載app / viz（在此示例中，在HTML信息板中：

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/headerview",
    "splunkjs/mvc/footerview",
    ...
    "../app/D3_Viz/viz"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        HeaderView,
        FooterView,
        ...
        d3Viz
    ){
        ... splunk specific stuff
        // No dependencies have to be configured 
        // in the client code
        d3Viz.renderSankey({...});
    }
);