使用Web Worker和D3.js异步生成图形？

Question

我目前正在解决一个问题，需要我的Web应用程序生成一个表示大约50k到60k个数据点的图表。它加载相当迅速（约6秒钟），但我想知道是否可以使用D3.js在Web Worker中生成图形，然后传回SVG以加载到页面中。

- user1449496

Answer 1

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

最近Jason Davies提交了一项内容。Mike Bostock表示，未来将从d3.core中分离出依赖于DOM的代码，这样您就可以制作一个使用web-workers API的自定义d3构建版本。

我也遇到了同样的问题，在我的力导向图中有大量节点，感觉非常迟缓。我希望以某种方式提高性能。我认为上一个使用node服务器上的phantomJS的线程是个好主意，但是该方法涉及的网络延迟会破坏平滑的力导向感觉。

- arunkjn

---

那么你在哪里找到没有DOM依赖的剥离版D3呢？ - stallingOne

Answer 2

Web Workers没有DOM访问权限，因此你所能做的就是构建一个可用于快速创建DOM的东西。worker可以处理数据集并执行所有重要计算，然后将结果作为一组数组返回。

- Erik Dahlström

---

谢谢。我担心这会是答案。 - user1449496

@meetamit 那可能是一个选项，我猜，使用PhantomJS在服务器上生成DOM，然后传递给客户端？但这不是使用Web Workers的方式，而这正是问题所在。 - Erik Dahlström

Answer 3

我使用Web Worker计算弦和弦型分组，具体步骤如下：

1. create a custom build of d3 that doesn't have a dependecy on the document object or the DOM (see: https://github.com/mbostock/smash/wiki)

2. create a web worker file and use importScripts to load the custom d3 build

3. activate your worker in your rendering code. I used a promise to encapsulate the communication with the worker:

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

   later, in the rendering function:

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

- thedude

---

如果你在启动d3时留下正确的（虚假）对象来安抚d3，实际上可以在Web Worker中运行标准的d3。然而，使用d3与Web Worker的主要问题是发送和接收消息时的序列化开销。我非常想知道是否有人提出了一种使用可转移对象来消除序列化的好方法。 - Cool Blue