Il sito Web di Electron afferma che le applicazioni realizzate con elettrone possono avere accesso ai moduli nodo. Possono avere accesso alla libreria D3? Se sì, come può essere impostato?È possibile utilizzare la libreria D3 con l'elettrone (shell Atom)?
Tutti i moduli JS (almeno teoricamente) puri sono compatibili con l'elettrone, poiché fornisce anche un ambiente di runtime javascript (io.js) (CommonJS).
L'unica cosa importante è che l'elettrone non imposta automaticamente la variabile NODE_PATH e non cerca nel percorso di sistema/moduli globali per i moduli require d. Quindi devi solo fare in modo di avere il percorso d3.js sul NODE_PATH:
NODE_PATH="/PATH/TO/d3.js" electron /PATH/TO/APP
D3 è disponibile come Node.js module che può essere importato nel codice JavaScript che si desidera utilizzare per rendere la vostra applicazione di visualizzazione.
Come esempio di come integrare D3 in un'applicazione Electron, dare un'occhiata alla mia applicazione D3 Space Filler Explorer su GitHub. Questa applicazione visualizza l'utilizzo dello spazio su disco con più grafici a torta D3 e una mappa di tre D3.
Uno schema che ho trovato utile era quello di iniettare l'elemento SVG nella visualizzazione D3, che differisce dal solito approccio negli esempi D3 che crea l'elemento SVG nella visualizzazione. Vedi esempi di questa iniezione di dipendenza nei file /app/js/pie-chart.js e /app/js/treemap-chart.js.
abbiamo risolto questo nella nostra workteam installazione d3 con Npm:
npm install d3 --save
e in index.html mettiamo questo:
<script>var d3 = require("d3")</script>
Stavamo ottenendo questo problema da nv. d3.js linea 18, c'è una piccola funzione che richiede d3 come modulo nodo e nella nostra app lo stavamo usando in bower_components, quindi installandolo con npm e richiedendo nel tuo indice direttamente da node_modules come come ho detto probabilmente risolverà questo problema come ha fatto con noi.
Hai avuto problemi ad aggiungere SVG usando d3? È per questo che lo metti nel markup piuttosto che crearlo con d3? – felix
Entrambi gli approcci funzionano correttamente. Tuttavia, penso che sia una buona pratica di progettazione iniettare l'elemento SVG nel codice che popola quell'elemento SVG per rendere un grafico D3. Questo ha due vantaggi: (1) Il codice di rendering è focalizzato sul rendering del grafico senza bisogno di sapere dove si trova il grafico nel documento HTML. (2) Il codice di rendering grafico può essere riutilizzato più facilmente nello stesso documento HTML. Ad esempio, D3 Space Filler Explorer ha un grafico a torta per disco. Per rendere più grafici a torta su disco, viene creato un elemento SVG per ogni disco, che viene passato al codice di rendering del grafico a torta. –
Inizialmente stavo creando l'elemento svg usando d3, ma per qualche ragione assolutamente non creerebbe nulla. Metterlo in html e selezionarlo è l'unico modo per farlo funzionare. In realtà preferirei creare il/i proprio/i svg (i) in modo tale che a un componente possa essere dato un id elemento html per visualizzarsi all'interno e il markup non deve essere conforme ai requisiti interni del componente. – felix