Utilizzare Web Worker e D3.js per generare grafici in modo asincrono?

Question

Attualmente sto lavorando a un problema che richiede la mia applicazione web per generare un grafico che rappresenta circa 50k a 60k di punti di dati. Si carica abbastanza velocemente (~ 6 secondi), ma quello che mi chiedo se è possibile utilizzare D3.js per generare il grafico in un Web Worker e quindi passare il SVG indietro per essere caricato nella pagina.

Answer 1

I Web Worker non hanno accesso al DOM, quindi tutto ciò che si potrebbe fare su quel lato sarebbe creare qualcosa che potrebbe essere utilizzato per creare rapidamente il DOM. I lavoratori possono, ad esempio, elaborare i set di dati e fare tutti i calcoli pesanti, quindi restituire il risultato come una serie di array.

Answer 2

https://github.com/mbostock/d3/commit/43d38773623b52209d2667287a1ae626fb95b0d9

Un recente commit da Jason Davies. Mike Bostock dice che in futuro il codice dipendente dal DOM sarà separato da d3.core e in questo modo è possibile creare una build d3 personalizzata che funzioni con l'API dei web-worker.

Ho avuto lo stesso problema in cui ho un grafico di forza diretto con un numero elevato di nodi. Sembra molto pigro. Voglio migliorare le prestazioni in qualche modo. Penso che l'ultimo thread con phantomJS su un server di nodi sia una buona idea, ma la latenza della rete coinvolta nell'approccio rovinerà la sensazione di forza diretta.

Answer 3

sono riuscito a calcolare le corde e gruppi di un layout corda utilizzando un lavoratore web nel modo seguente:

1. creare una generazione personalizzata di d3 che non ha un dependecy sull'oggetto documento o il DOM (vedi: https://github.com/mbostock/smash/wiki)

2. creare un file operaio web e utilizzare importScripts per caricare il costume d3 costruire

3. attivare il tuo lavoratore nel codice di rendering. Ho usato una promessa per incapsulare la comunicazione con il lavoratore:

   calculateChords = (padding, matrix) -> 
        deferred = $.Deferred() 
   
        worker = new Worker("worker.js") 
   
        worker.onmessage = (e) -> 
         deferred.resolve(e.data.groups, e.data.chords); 
   
        worker.postMessage { 
         matrix: matrix 
        } 
   
        deferred.promise() 
   

   dopo, nella funzione di rendering:

   calculateChords(matrix).then (groups, chords) -> 
       ...