2012-10-31 18 views
20

Mam problemy z próbą zintegrowania d3 z aplikacją wymagającą/szkieletową. Moi main.js zawiera coś takiego:jak zintegrować d3 z require.js

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

i mój widok kręgosłup coś podobnego (w coffeescript)

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

dziennika Konsola mówi d3 jest null. Czy istnieje prosty sposób zintegrowania d3 z tego typu aplikacjami?

Odpowiedz

50

d3 nie wywołuje funkcji define(), aby zadeklarować moduł, więc lokalne odwołanie do widoku szkieletu nie będzie takie, jak tego chcesz. Albo użyć zmiennej globalnej wykonaną przez D3:

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

Albo użyć shim config zadeklarować wartość eksportu do D3:

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

który powie requirejs użycie globalnego d3 jako wartość modułu dla d3 .

+18

Ważna informacja dla każdego, kto przychodzi na to po styczniu 2014 r. - d3 nie działa już z requirejs shim w celu wyeksportowania obiektu globalnego. Musisz go jawnie zażądać lub ustawić globalną referencję. Wyjaśnienie tutaj - https://github.com/mbostock/d3/issues/1693 – iabw

0

Nie jestem pewien, dlaczego to działa. Nie jestem pewien, czy jest to właściwy sposób ładowania modułu.

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

Od d3.v3 teraz rejestruje się jako moduł kompatybilny AMD jeśli biblioteka jest obecny, trzeba użyć tego obejścia (od 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) { /* .... */ }); 
+0

"_" wydaje się być naprawdę złym wyborem nazw zmiennych. Po prostu pytasz o konflikt z plikiem underscore.js. – blatt

+2

@blatt nie jest moim kodem, ale _ jest zmienną lokalną i nie jest używany nigdzie indziej w tym, który definiuje wywołanie zwrotne, więc nie ma wpływu na żaden globalny _. Poza tym naprawdę nie ma powodu, aby modyfikować, które definiują oddzwanianie. Dla czytelności, zgadzam się, _ jest prawdopodobnie złym wyborem. – webXL