wie zu integrieren d3 mit require.js

Question

Ich habe Probleme bei der Integration von d3 in eine Require/Backbone-Anwendung. Mein main.js enthält so etwas wie:

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

Und mein Rückgrat Ansicht so etwas wie (in Coffeescript)

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

Console log sagt d3 null ist. Gibt es eine einfache Möglichkeit, d3 in diese Art von Anwendung zu integrieren?

Answer 1

d3 ruft define() nicht auf, um ein Modul zu deklarieren, daher ist der lokale d3 Verweis auf die Backbone-Ansicht nicht das, was Sie wollen. Verwenden Sie entweder die globale Variable von d3 gemacht:

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

Oder die shim config verwenden, um eine Ausfuhr Wert für d3 zu erklären:

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

Das requirejs wird sagen, das globale d3 als Modulwert für d3 verwenden .

Answer 2

Ich bin mir nicht sicher warum, aber das funktioniert. Ich bin mir nicht sicher, ob es die richtige Art ist, ein Modul zu laden.

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

Answer 3

Seit d3.v3 nun selbst registriert als AMD-Modul, wenn eine kompatible Bibliothek vorhanden ist, müssen Sie diese Abhilfe verwenden (von 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) { /* .... */ });