cách tích hợp d3 với require.js

Question

Tôi đang gặp sự cố khi cố gắng tích hợp d3 vào ứng dụng yêu cầu/xương sống. main.js My chứa một cái gì đó như:

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

Và xem xương sống một cái gì đó của tôi như thế nào (trong coffeescript)

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

điều khiển log nói d3 là null. Có cách nào đơn giản để tích hợp d3 vào loại ứng dụng này?

Answer 1

d3 không gọi define() để khai báo mô-đun, do đó, tham chiếu d3 cục bộ cho chế độ xem xương sống sẽ không phải là thứ bạn muốn. Hoặc sử dụng các biến toàn cầu được thực hiện bởi d3:

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

Hoặc sử dụng shim config để khai báo giá trị xuất khẩu cho d3:

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

Điều đó sẽ cho requirejs sử dụng d3 toàn cầu như giá trị mô-đun cho d3 .

Answer 2

Tôi không chắc chắn tại sao nhưng tính năng này hoạt động. Tôi không chắc chắn nếu nó là cách thích hợp để tải một mô-đun.

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

Answer 3

Kể từ d3.v3 tại đăng ký chính nó như là một mô-đun bộ xử lý AMD nếu một thư viện tương thích là hiện tại, bạn sẽ cần phải sử dụng workaround này (từ 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) { /* .... */ });