Question

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

Answer 1

Web Workers没有DOM访问权限，所以你可以做的就是构建一些可以用来快速创建DOM的东西。工作人员可以例如处理数据集并执行所有繁重的计算，然后将结果作为一组数组传回。

Answer 2

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

Jason Davies最近的提交。 Mike Bostock表示，将来DOM依赖代码将与d3.core分离，这样你就可以制作一个适用于web-workers API的自定义d3构建。

我遇到了同样的问题，我有一个带有大量节点的力导向图。感觉非常迟钝。我想以某种方式改善性能。我认为在节点服务器上使用phantomJS的最后一个线程是一个好主意，但该方法中涉及的网络延迟将破坏平滑的力导向感。

Answer 3

我设法通过执行以下操作，使用网络工作人员计算和弦布局的和弦和组：

创建d3的自定义版本，该版本对文档对象或DOM没有依赖性（请参阅：https://github.com/mbostock/smash/wiki）
创建一个Web worker文件并使用importScripts加载自定义d3版本

在渲染代码中激活您的工作人员。我使用了一个承诺来封装与工作人员的沟通：

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

以后，在渲染功能中：

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

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

3 个答案: