¿Utiliza Web Worker y D3.js para generar gráficos de forma asíncrona?

Question

Actualmente estoy trabajando en un problema que requiere que mi aplicación web genere un gráfico que represente aproximadamente 50k a 60k puntos de datos. Se carga bastante rápido (~ 6 segundos), pero lo que me pregunto es si es posible usar D3.js para generar el gráfico en un Trabajador web y luego pasar el SVG para que se cargue en la página.

Answer 1

Web Los trabajadores no tienen acceso a DOM, por lo que todo lo que podrías hacer en ese lado sería construir algo que pueda usarse para crear rápidamente el DOM. Los trabajadores podrían, por ejemplo, procesar los conjuntos de datos y hacer todos los cálculos pesados, luego pasar el resultado nuevamente como un conjunto de matrices.

Answer 2

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

Un reciente cometen por Jason Davies. Mike Bostock dice que en el futuro el código dependiente de DOM estará separado de d3.core y de esa manera usted puede crear una compilación d3 personalizada que funcione con la API de web-workers.

Tuve el mismo problema cuando tengo un gráfico de fuerza dirigida con una gran cantidad de nodos. Se siente muy lento. Quiero mejorar el rendimiento de alguna manera. Creo que el último hilo con phantomJS en un servidor de nodos es una buena idea, pero la latencia de la red implicada en el enfoque arruinará la sensación suave dirigida a la fuerza.

Answer 3

me las arreglé para calcular los acordes y grupos de un diseño acorde usando un trabajador web de la siguiente manera:

1. crear una versión personalizada de d3 que no tiene un dependecy en el objeto o documento el DOM (ver: https://github.com/mbostock/smash/wiki)

2. crear un archivo de trabajador web y utilizar importScripts para cargar la costumbre d3 construir

3. activar su trabajador en su código de representación. He utilizado una promesa para encapsular la comunicación con el trabajador:

   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() 
   

   más tarde, en la función de representación:

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