Integrazione Requirejs, d3 e nvd3

Question

Sto affrontando il problema dell'integrazione di requirejs con d3 e nvd3 e ho trovato una soluzione semplice utilizzando il numero shim del fabbisogno. Utilizzando lo spessore posso esportare una variabile, e posso anche definire le dipendenze:

d3: { exports: 'd3' }, 
nvd3: { 
    exports: 'nv', 
    deps: ['d3'] 
}, 

In questo modo, ho semplicemente installare i pacchetti D3 e altri con pergolato, e includo loro richiedono, ed è davvero veloce e pulito .

Tuttavia, ho affrontato il seguente problema: ci sono probabilmente alcuni scontri tra la variabile globale d3 e quella locale (quella iniettata nei moduli richiesti). È un problema di integrazione di d3/require/nvd3 relativo a transizioni e selezioni. Non capisco completamente il problema, ma posso già fare alcune considerazioni.

• jquery ha lo stesso problema con la richiedono, e forniscono il metodo noConflict risolvere il problema
• molte biblioteche hanno questo comportamento, si esportare un simbolo globale, ma per quanto ne so non c'è alcuna correzione pronto da requirejs per il problema generale
• il problema è risolto se rinominare tutti i riferimenti globali a d3 in origine d3 a un altro nome. Ho ancora d3 nel modulo iniettato, ma non sia in conflitto più

Per quanto posso vedere, tutte le funzionalità D3 funzionano in questo modo, ma uno dei grafici nvd3 ha transizioni rotto probabilmente perché una selezione o speditore è sovrascritto. Richiede una profonda comprensione degli interni d3 per individuare con precisione l'errore, ma probabilmente una gestione semplice ma corretta del simbolo globale cancellerà l'intero ammontare di problemi simili.

Probabilmente, a causa del modo in cui requirejs gestisce le dipendenze di shim, il simbolo globale d3 è esposto a nvd3. Lo stesso simbolo, comunque, non è disponibile per richiedere moduli, e verrà sovrascritto in qualche modo se iniettato (incluso nelle dipendenze del modulo).

Ho provato anche a racchiudere d3 in un modulo e restituire correttamente una variabile d3 locale, ma sembra che il problema persista ancora.

Ho anche chiesto aiuto su questo su this d3 group discussion che ospita alcuni post precedenti su d3 e moduli.

---

ho aggiunto un banco di prova qui: https://github.com/danse/requirenvd3

Answer 1

Il problema non sembra essere la tua configurazione RequireJS ma piuttosto il fatto che stai usando d3.v3 e non d3.v2. Ho eseguito il downgrade di d3 nel tuo caso di test e le transizioni hanno funzionato correttamente. (I pop-up sono ancora tutti di lato, che non penso dovrebbero essere, ma non sembra essere ciò di cui siete attualmente preoccupati). Mi risulta che nvd3 abbia qualche problema con d3.v3 , probabilmente questo è uno. Inoltre, si noti la versione di d3 in jsFiddle di ddotsenko. Questo potrebbe spiegare perché la sua soluzione non ha funzionato quando l'hai implementata usando la tua libreria d3.v3.

Answer 2

In primo luogo, è possibile ignorare shim Non è necessario per restituire qualcosa per plain-JS. Basta usare i globals.

Loading Angular from CDN via RequireJS is not injected

In secondo luogo, mentre shim è semi-utile per la dichiarazione dipendenze per gli script, si può fare esplicitamente così:

require(['path/to/d3.min'], function(){ 
    // nesting to insure d3 loads before nvd3 
    require(
     [ 
      'path/to/mylogic' // <- AMD module 
      ,'path/to/nvd3.min' // <- actually a plain JS file 
     ] 
     , function(mylogic /*, we ignore what nvd3 returns */){ 
      window.nv // is available for you 
     } 
    ) 
}) 

Answer 3

Guardate quello che faccio nel this main.js file (usando "dipendono" plugin requirejs) e quindi in altri file che richiedono qualcosa che deve essere esportato in una variabile globale:

Il plugin depend è veramente bello e consente di impostare il caricamento gerarchico tramite dipend! Plugin [dependancy1, dependancy2] (carica "plugin" dopo aver caricato "dependancy1" e "dependancy2".