Draw a graph using D3 (v3) in a WebWorker

Question

The goal is to draw a graph using D3 (v3) in a WebWorker (Rickshaw would be even better).

Requirement #1: The storage space for the entire project should not exceed 1 MB.

Requirement #2: Internet Explorer 10 should be supported

---

I already tried to pass the DOM element to Webworker. This brought the following error message:

DOMException: Failed to execute 'postMessage' on 'Worker': HTMLDivElement object could not be cloned.

  var worker = new Worker( 'worker.js' );
  worker.postMessage( {
    'chart' : document.querySelector('#chart').cloneNode(true)
  } );

---

The GitHub user chrisahardie has made...

a small proof on concept showing how to generate a d3 SVG chart in a web worker and pass it back to the main UI thread to be injected into a webpage.

https://github.com/chrisahardie/d3-svg-chart-in-web-worker

He integrated jsdom into the browser with Browserify.

The problem:

The script has almost 5 MB, which is too much memory requirements for the application.

So my question:

Does anyone have experience in solving the problem or has any idea how the problem can be solved and the requirements can be met?

Answer 1

The Web Workers don't have access to the following JavaScript objects: The window object, The document object and The parent object. So, all we could do on that side would be to build something that could be used for quickly creating the DOM. The worker(s) could e.g process the datasets and do all the heavy computations, then pass the result back as a set of arrays. More details, you could check this article and this sample