Używaj Web Worker'a i D3.js do asynchronicznego generowania wykresów?

Question

Aktualnie pracuję nad problemem, który wymaga, aby moja aplikacja internetowa generowała wykres reprezentujący około 50k do 60 tys. Punktów danych. Ładuje się dość szybko (~ 6 sekund), ale zastanawiam się, czy można użyć D3.js do wygenerowania wykresu w Web Worker, a następnie przekazać SVG do załadowania na stronę.

Answer 1

Pracownicy WWW nie mają dostępu do DOM, więc wszystko, co możesz zrobić po tej stronie, to zbudowanie czegoś, co może być użyte do szybkiego utworzenia DOM. Pracownik (y) mógłby np. Przetwarzać zbiory danych i wykonywać wszystkie ciężkie obliczenia, a następnie przekazywać wyniki z powrotem jako zbiór tablic.

Answer 2

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

Niedawny popełnienia przez Jason Davies. Mike Bostock mówi, że w przyszłości kod zależny od DOM zostanie oddzielony od d3.core i w ten sposób można stworzyć niestandardową kompilację d3, która działa z interfejsem API dla web-pracowników.

Miałem ten sam problem, gdy mam wykres ukierunkowany na siłę z dużą liczbą węzłów. Czuje się bardzo powolny. Chcę w jakiś sposób poprawić wydajność. Myślę, że ostatni wątek z phantomJS na serwerze węzła jest dobrym pomysłem, ale opóźnienie sieci związane z podejściem zrujnuje gładkie uczucie kierowane siłą.

Answer 3

udało mi się obliczyć akordy i grup układ akordów za pomocą pracownika internetowej, wykonując następujące czynności:

1. stworzyć zwyczaj budowania D3, które nie mają dependecy na obiekcie dokumentu lub DOM (patrz: https://github.com/mbostock/smash/wiki)

2. utworzyć plik pracownika internetowej i korzystać importScripts załadować zwyczaj d3 budowę

3. aktywować pracownika w kodzie renderowania. Kiedyś obietnicę hermetyzacji komunikacji z pracownikiem:

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

   później w funkcji renderowania:

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