如何將d3與require.js集成

Question

我在嘗試將d3集成到require/backbone應用程序時遇到問題。我main.js包含如下：

require.config({ 
    paths: { 
    d3: 'libs/d3/d3.v2.min' 
    backbone: ... 
    ... 
    } 
}); 

而我的看法骨幹喜歡的東西（在CoffeeScript中）

define ['backbone','d3',...], (Backbone,d3,...) -> 
    MyView = Backbone.View.extend 
    initialize:() -> 
     d3.somefunction 

控制檯日誌說D3是空的。有沒有簡單的方法將d3集成到這種類型的應用程序中？

Answer 1

d3沒有調用define（）聲明一個模塊，所以本地的d3對骨幹視圖的引用不會是你想要的。無論是使用由D3做出的全局變量：

define(['backbone', 'd3'], function (backbone, ignore) { 
    //Use global d3 
    console.log(d3); 
}); 

或者使用shim config爲D3申報出口值：

requirejs.config({ 
    shim: { 
     d3: { 
      exports: 'd3' 
     } 
    } 
}); 

會告訴requirejs使用全局D3爲D3模值。

Answer 2

我不知道爲什麼，但這個工程。我不確定是否是加載模塊的正確方法。

require(['libs/jquery', 'libs/d3'], function($, ignore) { 
    d3 = require('libs/d3'); 
}); 

Answer 3

由於d3.v3現在自己註冊爲如果兼容的庫是目前AMD的模塊，你需要使用此解決方案（從http://pastebin.com/d5ZDXzL2）：

requirejs.config({ 
    paths: { 
     d3: "scripts/d3.v3", 
     nvd3: "scripts/nv.d3" 
    }, 
    shim: { 
     nvd3: { 
      exports: 'nv', 
      deps: ['d3.global'] 
     } 
    } 
}); 
// workaround for nvd3 using global d3 
define("d3.global", ["d3"], function(_) { 
    d3 = _; 
}); 

define('myModule', ['nvd3'], function(nc) { /* .... */ });