d3.js - 在 WebWorker 中使用 D3 (v3) 绘制图形

Question

目标是在 WebWorker 中使用 D3 (v3) 绘制图形（Rickshaw 会更好）。

要求 #1：整个项目的存储空间不应超过 1 MB。

要求 #2：应支持 Internet Explorer 10

---

我已经尝试将 DOM 元素传递给 Webworker。这带来了以下错误消息：

DOMException：无法在“Worker”上执行“postMessage”：无法克隆 HTMLDivElement 对象。

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

---

GitHub 用户chrisahardie已经...

一个关于概念的小证明，展示了如何在 web worker 中生成 d3 SVG 图表并将其传递回主 UI 线程以注入网页。

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

他使用 Browserify 将 jsdom 集成到浏览器中。

问题：

该脚本几乎有 5 MB，这对应用程序的内存需求太大。

所以我的问题：

有没有人有解决问题的经验或知道如何解决问题并满足要求？

标签： d3.jsinternet-explorer-10web-workerjsdomrickshaw

Answer 1

Web Worker 无权访问以下 JavaScript 对象：窗口对象、文档对象和父对象。因此，我们在这方面所能做的就是构建一些可用于快速创建 DOM 的东西。工作人员可以例如处理数据集并进行所有繁重的计算，然后将结果作为一组数组传回。更多细节，你可以查看这篇文章和这个示例