दिलचस्प पोस्ट
सरल सीएसएस एनिमेशन लूप – फ़ेडिंग इन एंड आउट "लोडिंग" टेक्स्ट सुडोकू वर्ग में बहिर्गमन के दोष कैसे निकालें? विज़ुअल स्टूडियो डीबगर विज़ुअलाइजर्स को समय से कैसे बाहर रखना है? PHPMailer अनुलग्नक, यह एक भौतिक फ़ाइल के बिना कर रही है जावा रनटाइम। एक्सएसी से स्ट्रीम पढ़ना IE पर jqGrid कॉलम हेडर लपेटने में समस्या डेल्टाइप (ऑटो) के कुछ उपयोग क्या हैं? Javafx – आवेदन वर्ग नियंत्रक वर्ग हो सकता है पायथन में एक मैट्रिक्स को स्थानांतरित करें क्यों नहीं किया गया रजिस्ट्रेशन के लिए नोटिफिकेशन के साथ डिवीजन टोकन नहीं कहा जाता है एंड्रॉइड ऐप में पृष्ठभूमि का रंग कैसे बदल सकता है स्ट्रिंग में किसी भी आधार में एक पूर्णांक कैसे परिवर्तित करें? मैं एएसपी.NET MVC में नियंत्रक में मार्ग का नाम कैसे प्राप्त करूं? ओएस कैसे प्राप्त करें जिस पर PHP चल रहा है? Pthreads में संकेत संभाल

तेज और उत्तरदायी इंटरैक्टिव चार्ट / ग्राफ़: एसवीजी, कैनवास, अन्य?

मैं एक ऐसी परियोजना को अपडेट करने के लिए उपयोग करने के लिए सही तकनीक का चयन करने की कोशिश कर रहा हूं जो मूलतः एक ज़ूम करने योग्य, पैनेबल ग्राफ़ में हजारों अंकों को प्रस्तुत करता है। वर्तमान कार्यान्वयन, प्रोटोविज़ का उपयोग करना, कम निष्पादक है। यहां इसकी जांच कीजिए:

http://www.planethunters.org/classify

लगभग 2000 अंक हैं जब पूरी तरह ज़ूम आउट हो जाते हैं। थोड़ा ज़ूम करने के लिए नीचे के हैंडल का उपयोग करने की कोशिश करें, और उसे चारों ओर पैन करने के लिए खींचें आप देखेंगे कि यह काफी तड़का हुआ है और आपके CPU उपयोग को एक कोर पर 100% तक बढ़ जाता है, जब तक आपके पास वास्तव में तेजी से कंप्यूटर न हो। फ़ोकस क्षेत्र में प्रत्येक परिवर्तन प्रोटोज़ को एक रेड्रॉन्स करता है जो बहुत धीमी गति से धीमा होता है और अधिक खींचा जाने वाले अधिक अंक के साथ खराब होता है।

मैं इंटरफेस में कुछ अपडेट करना चाहूंगा और एनीमेशन और इंटरैक्शन के साथ अधिक संवेदनशील होने के लिए अंतर्निहित दृश्य प्रौद्योगिकी को बदलूंगा। निम्न आलेख से, ऐसा लगता है कि विकल्प किसी अन्य एसवीजी-आधारित पुस्तकालय या कैनवास-आधारित एक के बीच है:

How to Choose Between Canvas and SVG

डीओ 3. जेएस , जो प्रोटोविस से बाहर हो गया, एसवीजी आधारित है और एनीमेशन प्रदान करने में बेहतर होना चाहिए । हालांकि, मैं कितना बेहतर और इसके प्रदर्शन सीमा क्या है के रूप में संदिग्ध हूँ इस कारण से, मैं कैनवास-आधारित लाइब्रेरी जैसे काइनेटिकजेएस का उपयोग करके एक और पूरी ओवरहाल पर भी विचार कर रहा हूं। हालांकि, एक दृष्टिकोण या किसी अन्य का उपयोग करने में बहुत दूर होने से पहले, मैं उस व्यक्ति से सुनना चाहता हूं, जिसने इस तरह के डेटा के साथ एक समान वेब अनुप्रयोग किया है और उनकी राय प्राप्त की है।

सबसे महत्वपूर्ण बात यह है कि अन्य इंटरैक्शन सुविधाओं को जोड़ने और एनीमेशन को प्रोग्रामिंग करने में आसानी पर एक दूसरे के माध्यम से ध्यान केंद्रित किया जाता है। संभवत: एक बार में 2000 से ज्यादा अंक नहीं होंगे, प्रत्येक एक पर उन छोटी त्रुटि सलाखों के साथ। ज़ूम इन, आउट, और पैनिंग को चिकनी होना चाहिए। यदि सबसे हालिया एसवीजी पुस्तकालय इस पर अच्छे हैं, तो शायद डी 3 का उपयोग करने में आसानी KineticJS, आदि के लिए बढ़ी सेटअप को पछाड़ देगा। लेकिन अगर कैनवास का उपयोग करने के लिए विशेष रूप से धीमी कंप्यूटर वाले लोगों के लिए एक बड़ा प्रदर्शन लाभ होता है, तो मैं निश्चित रूप से उस रास्ते पर जाना पसंद करेंगे

NYTimes द्वारा उपयोग किए गए ऐप का उदाहरण, जो एसवीजी का उपयोग करता है, लेकिन फिर भी स्वीकार्यता से आसानी से एनिमेटेड होता है: http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html । अगर मैं उस प्रदर्शन को प्राप्त कर सकता हूं और अपना कैनवास ड्राइंग कोड लिखना नहीं चाहता, तो मैं शायद एसवीजी के लिए जाना होगा।

मैंने देखा कि कुछ प्रयोक्ताओं ने कैनवास रेंडरिंग के साथ संयुक्त डी 3.जेएस हेरफेर के संकर का उपयोग किया है। हालांकि, मुझे इस ऑनलाइन के बारे में ज्यादा प्रलेख नहीं मिल सकता है या उस पोस्ट के ओपी के साथ संपर्क में आ सकता है। यदि किसी के पास इस तरह का डोम-टू-कैनवस ( डेमो , कोड ) कार्यान्वयन करने का कोई अनुभव है, तो मैं आपके साथ भी सुनना चाहता हूं। यह डेटा को हेरफेर करने और इसे कैसे रेंडर करने के तरीके (और इसलिए प्रदर्शन) पर कस्टम नियंत्रण रखने में सक्षम होने का एक अच्छा संकर होने लगता है, लेकिन मैं सोच रहा हूं कि DOM में सब कुछ लोड करना अभी भी धीमी गति से चल रहा है।

मुझे पता है कि ऐसे कुछ मौजूदा प्रश्न हैं जो इस एक के समान हैं, लेकिन इनमें से कोई भी एक ही बात नहीं पूछता। आपकी सहायता के लिए धन्यवाद.

अनुवर्ती : मैं का उपयोग कर समाप्त हुआ कार्यान्वयन https://github.com/zooniverse/LightCurves पर है

Solutions Collecting From Web of "तेज और उत्तरदायी इंटरैक्टिव चार्ट / ग्राफ़: एसवीजी, कैनवास, अन्य?"

सौभाग्य से, 2000 ड्राइंग ड्राइंग का परीक्षण करने के लिए एक बहुत आसान उदाहरण है। तो यहां चार संभव कार्यान्वयन हैं, दो कैनवस और एसवीजी के दो:

  • कैनवास ज्यामितीय ज़ूमिंग
  • कैनवास अर्थ ज़ूमिंग
  • एसवीजी ज्यामितीय ज़ूमिंग
  • एसवीजी अर्थ ज़ूमिंग

ये उदाहरण ज़ूमिंग और पैनिंग को लागू करने के लिए डी 3 के ज़ूम व्यवहार का उपयोग करते हैं। एक तरफ से, कि क्या कैनवस या एसवीजी में सर्कल प्रदान किए जाते हैं, अन्य प्रमुख अंतर यह है कि क्या आप ज्यामितीय या अर्थ ज़ूमिंग का उपयोग करते हैं।

जियोमेट्रिक जूमिंग का अर्थ है कि आप संपूर्ण व्यूपोर्ट में एक परिवर्तन को लागू करते हैं: जब आप ज़ूम इन करते हैं, तो मंडलियां बड़ी हो जाती हैं इसके विपरीत अर्थपूर्ण ज़ूमिंग का अर्थ है कि आप प्रत्येक मंडली में व्यक्तिगत रूप से परिवर्तन करते हैं: जब आप ज़ूम इन करते हैं, तो सर्कल एक ही आकार में रहते हैं, लेकिन वे फैले हुए हैं। Planethunters.org वर्तमान में अर्थ जूमिंग का उपयोग करता है, लेकिन यह अन्य मामलों पर विचार करने के लिए उपयोगी हो सकता है

जियोमेट्रिक ज़ूमिंग कार्यान्वयन को सरल करता है: आप एक बार अनुवाद और पैमाने लागू करते हैं, और फिर सभी मंडलियां फिर से प्रस्तुत की जाती हैं। एसवीजी कार्यान्वयन विशेष रूप से सरल है, एक एकल "परिणत" विशेषता को अद्यतन करना। दोनों ज्यामितीय ज़ूमिंग उदाहरणों का प्रदर्शन पर्याप्त से अधिक लगता है। अर्थ ज़ूमिंग के लिए, आप देखेंगे कि डी 3 प्रोटोविस की तुलना में काफी तेज है। यह इसलिए है क्योंकि यह प्रत्येक ज़ूम ईवेंट के लिए बहुत कम काम कर रहा है। (प्रोटोविस संस्करण को सभी तत्वों पर सभी गुणों की पुन: गणना करना पड़ता है।) कैनवास आधारित अर्थ ज़ूमिंग एसवीजी की तुलना में थोड़ी अधिक ज़िपी है, लेकिन एसवीजी सिमेंटिक ज़ूमिंग अभी भी संवेदनशील महसूस करता है।

फिर भी प्रदर्शन के लिए कोई जादू बुलेट नहीं है, और इन चार संभावित दृष्टिकोण संभावनाओं की पूरी जगह को कवर नहीं करना शुरू करते हैं। उदाहरण के लिए, आप ज्यामितीय दृष्टिकोण को पैनिंग ("ट्रांसफ़ॉर्ममेंट" विशेषता को अपडेट करने) के लिए ज्यामितीय और सिमेंटिक ज़ूमिंग को जोड़ सकते हैं और केवल ज़ूमिंग करते समय अलग-अलग मंडलियों को रेखांकित कर सकते हैं। आप संभवत: इन तकनीकों में से एक या एक से अधिक तकनीकों को भी जोड़ सकते हैं, जिसमें कुछ हार्डवेयर एक्सेलेरेशन (जैसे कि पदानुक्रमित बढ़त बंडलिंग उदाहरण ) को जोड़ने के लिए CSS3 के रूपांतरण हैं, हालांकि यह लागू करने के लिए मुश्किल हो सकता है और दृश्य कलाकृतियों को लागू कर सकता है।

फिर भी, मेरी निजी वरीयता को एसवीजी में यथासंभव अधिक रखना है, और कैनवास का प्रयोग केवल "इनर लूप" के लिए होता है जब प्रतिपादन बाधा है एसवीजी के विकास के लिए कई सुविधाएं हैं-जैसे कि सीएसएस, डाटा-मिलन और तत्व इंस्पेक्टर-यह कि कैनवास के साथ शुरू करने के लिए प्रायः समयपूर्व अनुकूलन होता है एसवीजी के साथ कैनवास का मेल करना, जैसा कि आपने Facebook आईपीओ विज़ुअलाइज़ेशन से जुड़ा है, इन सुविधियों को बरकरार रखने का एक लचीला तरीका है, जबकि अभी भी सबसे अच्छा प्रदर्शन हासिल कर रहा है। मैंने इस तंत्र को क्यूबिज्म । जेएस में भी इस्तेमाल किया था, जहां समय-सीरीज के विज़ुअलाइज़ेशन का विशेष मामला बिटमैप कैशिंग के लिए अच्छी तरह उधार देता है।

जैसा कि ये उदाहरण दिखाते हैं, आप कैनवास के साथ डी 3 का उपयोग कर सकते हैं, हालांकि डी 3 के कुछ भाग एसवीजी-विशिष्ट हैं यह बल-निर्देशित ग्राफ़ और यह टक्कर पहचान उदाहरण भी देखें।

मुझे लगता है कि आपके मामले में कैनवास और एसवीजी के बीच का निर्णय »घोड़े की सवारी के बीच का निर्णय नहीं है, या पोर्श« ड्राइविंग » मेरे लिए यह कारों के रंग के बारे में निर्णय की तरह अधिक है

मुझे समझाएं: यह मान लें कि, ढांचे के आधार पर आपरेशन

  • एक स्टार आकर्षित,
  • एक सितारा जोड़ें और
  • एक स्टार को हटा दें

रैखिक समय ले लो इसलिए, यदि आपके ढांचे का निर्णय अच्छा था तो यह थोड़ा तेज है, अन्यथा थोड़ा धीमा।

यदि आप यह मानते हैं कि ढांचा अभी तेज़ है, तो यह पूरी तरह से स्पष्ट हो जाता है कि प्रदर्शन की कमी होने के कारण सितारों की अधिक मात्रा होती है और उन्हें संभालने में कुछ ऐसा नहीं है जो आपके लिए कर सकते हैं, कम से कम मुझे नहीं पता इसके बारे में।

मैं क्या कहना चाहता हूं यह है कि समस्या का आधार कम्प्यूटेशनल ज्यामिति की एक बुनियादी समस्या की ओर जाता है, अर्थात्: रेंज खोज और कंप्यूटर ग्राफिक्स में से एक और: विवरण का स्तर

अपनी कार्यक्षमता समस्या को हल करने के लिए आपको एक अच्छा प्रीप्रोसेसर लागू करने की आवश्यकता है जो बहुत तेजी से ढूंढने में सक्षम है, जो कि सितारों को प्रदर्शित करते हैं और संभवतः ज़ूम पर निर्भर करते हुए क्लस्टर क्लस्टर के लिए सक्षम होते हैं। केवल एक चीज जो आपके विचार को ज्वलंत और तेज रखती है, तारे की संख्या को कम संभव के रूप में आकर्षित करना है।

जैसा कि आप ने कहा है, सबसे महत्वपूर्ण बात यह है कि मैं कैनवास का इस्तेमाल करने की अपेक्षा करता हूं, क्योंकि यह DOM ऑपरेशन के बिना काम करता है। यह वेबजीएल का उपयोग करने का अवसर भी प्रदान करता है, जो ग्राफिक प्रदर्शन को बहुत बढ़ाता है।

बीटीडब्ल्यू: क्या आप पेपर की जांच करते हैं। जेएस ? यह कैनवास का उपयोग करता है, लेकिन वेक्टर ग्राफिक्स emulates।

पीएस: इस पुस्तक में आप वेब पर ग्राफिक्स के बारे में बहुत विस्तृत चर्चा कर सकते हैं, कैनवास के प्रौद्योगिकियों, पेशेवरों और विपक्ष, एसवीजी और डीएचटीएमएल।

मैंने हाल ही में निकट-रीयलटाइम डैशबोर्ड (हर 5 सेकंड को रीफ्रेश) पर काम किया और चार्ट का उपयोग करने का फैसला किया जो कि कैनवास का इस्तेमाल करते हैं

हमने उच्चचर्ट (एसवीजी) और कैनवासज की कोशिश की। यद्यपि हाईचर्ट्स एक शानदार चार्टिंग एपीआई है और जिस तरह से अधिक सुविधाएं प्रदान की जाती हैं, हमने कैनवासज का उपयोग करने का फैसला किया है।

हमें प्रति चार्ट में कम से कम 15 मिनट के डेटा प्रदर्शित करने की जरूरत है (अधिकतम दो घंटे की सीमा लेने का विकल्प)।

तो 15 मिनट के लिए: 900 अंक (डेटा बिंदु प्रति सेकंड) x2 (रेखा और बार संयोजन चार्ट) x4 चार्ट = 7,200 अंक कुल।

क्रोम प्रोफिलर का उपयोग करना, कैनवासज के साथ, मेमोरी कभी भी 30 एमबी से ऊपर नहीं थी, जबकि उच्चचर्र्स मेमोरी उपयोग 600 एमबी से अधिक हो गया था।

5 सेकंड के ताज़ा समय के साथ, कैनवासज रेंडरिंग अधिक आवंटित हुई थी, फिर उच्चचर्च।

हमने एक टाइमर (सेट इन्टरलेबल 5 सेकेंड) का इस्तेमाल किया है, जिससे 4 एंड एपीआई कॉल्स को डेटा को वापस एंड सर्वर से खींचने के लिए इस्तेमाल किया जा सकता है जो लचीलाशर्क से जुड़ा हुआ है। डेटा के रूप में अद्यतन प्रत्येक चार्ट को JQuery.post () द्वारा प्राप्त किया जाता है।

यह ऑफ़लाइन रिपोर्टों के लिए कहा गया है कि मैं इसके अधिक लचीली एपीआई के बाद से उच्चचरट के साथ जाना होगा।

ज़िंग चार्ट भी हैं जो कि एसवीजी या कैनवस का उपयोग करने का दावा करते हैं लेकिन उनको नहीं देखा है।

कैनवास पर विचार करना चाहिए जब प्रदर्शन वास्तव में महत्वपूर्ण है लचीलेपन के लिए एसवीजी ऐसा नहीं है कि कैनवास के फ्रेमवर्क लचीले नहीं हैं, लेकिन एसवीजी फ्रेमवर्क के रूप में समान कार्यक्षमता प्राप्त करने के लिए यह कैनवास ढांचे के लिए अधिक काम करता है।

यह उल्का चार्ट में भी देख सकता है, जो उबेर फास्ट कैनेटिकजेएस ढांचे के ऊपर बनाया गया है: http://meteorcharts.com/