Sử dụng Công nhân Web và D3.js để tạo biểu đồ không đồng bộ?

Question

Tôi hiện đang xử lý sự cố yêu cầu ứng dụng web của tôi tạo biểu đồ đại diện cho khoảng 50 nghìn đến 60 nghìn điểm dữ liệu. Nó tải khá nhanh (~ 6 giây), nhưng những gì tôi tự hỏi nếu nó có thể sử dụng D3.js để tạo ra đồ thị trong một Web Worker và sau đó vượt qua SVG trở lại để được tải vào trang.

Answer 1

Nhân viên Web không có quyền truy cập DOM, vì vậy tất cả những gì bạn có thể làm ở bên đó sẽ là xây dựng thứ gì đó có thể được sử dụng để tạo DOM nhanh chóng. (Các) nhân viên có thể xử lý các tập dữ liệu và thực hiện tất cả các phép tính nặng, sau đó chuyển kết quả trở lại như một tập hợp các mảng.

Answer 2

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

Một cam kết gần đây của Jason Davies. Mike Bostock nói rằng trong tương lai mã phụ thuộc DOM sẽ được tách ra từ d3.core và theo cách đó bạn có thể tạo một bản dựng d3 tùy chỉnh hoạt động với API công nhân web.

Tôi đã gặp vấn đề tương tự khi tôi có đồ thị có hướng lực với một số lượng lớn các nút. Nó cảm thấy rất chậm chạp. Tôi muốn cải thiện hiệu suất theo một cách nào đó. Tôi nghĩ rằng chủ đề cuối cùng với phantomJS trên một máy chủ nút là một ý tưởng hay, nhưng độ trễ của mạng liên quan đến cách tiếp cận sẽ làm hỏng cảm giác hướng về lực.

Answer 3

tôi quản lý để tính toán hợp âm và nhóm của một bố trí hợp âm sử dụng một nhân viên web bằng cách làm như sau:

1. tạo ra một tùy chỉnh xây dựng của d3 mà không có một dependecy trên đối tượng tài liệu hay DOM (xem: https://github.com/mbostock/smash/wiki)

2. tạo một file lao động web và sử dụng importScripts để nạp tùy chỉnh d3 xây dựng

3. kích hoạt công nhân của bạn trong mã vẽ của bạn. Tôi sử dụng một lời hứa để đóng gói các giao tiếp với người lao động:

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

   sau, trong hàm rendering:

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