वेब वर्कर और D3.js का उपयोग अतुल्यकालिक रूप से ग्राफ उत्पन्न करने के लिए करें?

Question

मैं वर्तमान में एक समस्या का काम कर रहा हूं जिसके लिए मेरे वेब एप्लिकेशन को एक चार्ट उत्पन्न करने की आवश्यकता है जो डेटा के लगभग 50k से 60k अंक का प्रतिनिधित्व करता है। यह काफी तेज़ी से लोड होता है (~ 6 सेकंड), लेकिन मैं क्या सोच रहा हूं कि वेब वर्कर में आलेख उत्पन्न करने के लिए D3.js का उपयोग करना संभव है और फिर पृष्ठ में लोड होने के लिए एसवीजी को वापस पास करना संभव है।

Answer 1

वेब श्रमिकों के पास कोई डोम एक्सेस नहीं है, इसलिए आप उस तरफ से ऐसा कुछ भी कर सकते हैं जिसका उपयोग जल्दी से डीओएम बनाने के लिए किया जा सके। कार्यकर्ता (उदाहरण) डेटासेट को संसाधित कर सकता है और सभी भारी गणना कर सकता है, फिर परिणाम को वापस सरणी के सेट के रूप में पास कर सकता है।

Answer 2

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

हाल ही में एक जेसन डेविस द्वारा प्रतिबद्ध। माइक Bostock का कहना है कि भविष्य में डीओएम आश्रित कोड d3.core से अलग किया जाएगा और इस तरह आप कस्टम डी 3 बिल्ड कर सकते हैं जो वेब-वर्कर्स एपीआई के साथ काम करता है।

मुझे वही समस्या थी जहां मेरे पास बड़ी संख्या में नोड्स के साथ एक बल निर्देशित ग्राफ़ था। यह बहुत आलसी लगता है। मैं किसी भी तरह से प्रदर्शन में सुधार करना चाहता हूं। मुझे लगता है कि एक नोड सर्वर पर phantomJS के साथ अंतिम धागा एक अच्छा विचार है, लेकिन दृष्टिकोण में शामिल नेटवर्क विलंबता चिकनी बल निर्देशित भावना को बर्बाद कर देगा। निम्नलिखित

Answer 3

मैं ऐसा करके एक वेब कार्यकर्ता का उपयोग कर chords और एक तार लेआउट के समूहों की गणना करने में कामयाब रहे:

1. कि दस्तावेज़ वस्तु पर एक निर्भरता नहीं है डी 3 की एक कस्टम निर्माण बना सकते हैं या डोम (देखें: https://github.com/mbostock/smash/wiki)

2. एक वेब कार्यकर्ता फ़ाइल बनाने और importScripts का उपयोग कस्टम निर्माण d3

3. अपने प्रतिपादन कोड में अपने कार्यकर्ता को सक्रिय लोड करने के लिए।

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