मैं एक ऐसी परियोजना को अद्यतन करने के लिए उपयोग करने के लिए सही तकनीक का चयन करने की कोशिश कर रहा हूं जो मूल रूप से एक ज़ूम करने योग्य, pannable ग्राफ में हजारों अंकों का प्रतिपादन करती है। वर्तमान कार्यान्वयन, प्रोटोविस का उपयोग करते हुए, अंडरपरफॉर्मेंट है। यहां इसकी जांच कीजिए:
http://www.planethunters.org/classify
पूरी तरह से ज़ूम आउट होने पर लगभग 2000 बिंदु हैं। थोड़ा सा ज़ूम करने के लिए नीचे के हैंडल का उपयोग करने का प्रयास करें, और इसे चारों ओर पैन करने के लिए खींचें। आप देखेंगे कि यह काफी तड़का हुआ है और आपके सीपीयू का उपयोग संभवतः एक कोर पर 100% तक हो जाता है जब तक कि आपके पास वास्तव में तेज कंप्यूटर न हो। फ़ोकस क्षेत्र में प्रत्येक परिवर्तन प्रोटॉविस के लिए एक रिड्रा कहता है जो बहुत धीमा है और अधिक बिंदुओं के साथ खराब है।
मैं इंटरफ़ेस के लिए कुछ अपडेट करना चाहूंगा और साथ ही एनीमेशन और इंटरैक्शन के साथ अधिक संवेदनशील होने के लिए अंतर्निहित विज़ुअलाइज़ेशन तकनीक को बदलूंगा। निम्नलिखित लेख से, ऐसा लगता है कि पसंद एक और एसवीजी-आधारित पुस्तकालय, या एक कैनवास-आधारित के बीच है:
http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/
d3.js , जो कि प्रोटॉविस से बढ़ा था, एसवीजी-आधारित है और इसे एनिमेशन प्रदान करने में बेहतर माना जाता है । हालांकि, मैं कितना बेहतर है और इसकी परफॉरमेंस सीलिंग क्या है, इसके बारे में संदिग्ध हूं। इस कारण से, मैं काइनेटिकजस जैसे एक कैनवास-आधारित पुस्तकालय का उपयोग करके अधिक पूर्ण ओवरहाल पर भी विचार कर रहा हूं । हालांकि, इससे पहले कि मैं एक दृष्टिकोण या किसी अन्य का उपयोग करने में बहुत दूर हो जाऊं, मैं किसी ऐसे व्यक्ति से सुनना चाहता हूं जिसने इस डेटा के साथ एक समान वेब एप्लिकेशन किया है और उनकी राय ले।
सबसे महत्वपूर्ण बात प्रदर्शन है, अन्य बातचीत सुविधाओं को जोड़ने और एनीमेशन प्रोग्रामिंग में आसानी पर एक माध्यमिक ध्यान देने के साथ। संभवतः एक बार में 2000 से अधिक अंक नहीं होंगे, जिनमें से प्रत्येक पर एक छोटी सी त्रुटि सलाखों के साथ होगी। ज़ूम इन, आउट और पैनिंग को सुचारू करने की आवश्यकता है। यदि सबसे हाल ही में एसवीजी पुस्तकालय इस पर सभ्य हैं, तो शायद डी 3 का उपयोग करने में आसानी से काइनेटिकजस आदि के लिए बढ़े हुए सेटअप से आगे निकल जाएंगे, लेकिन अगर कैनवास का उपयोग करने के लिए एक बड़ा प्रदर्शन लाभ है, खासकर धीमे कंप्यूटर वाले लोगों के लिए, तो मैं निश्चित रूप से इस तरह जाना पसंद करेंगे।
SVG का उपयोग करने वाले NYTimes द्वारा किए गए ऐप का उदाहरण, लेकिन अभी भी आसानी से स्वीकार करता है: http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html । अगर मुझे वह प्रदर्शन मिल सकता है और मुझे अपना खुद का कैनवास ड्राइंग कोड नहीं लिखना है, तो मैं शायद एसवीजी के लिए जाऊंगा।
मैंने देखा कि कुछ उपयोगकर्ताओं ने कैनवास रेंडरिंग के साथ संयुक्त d3.js हेरफेर के एक संकर का उपयोग किया है । हालाँकि, मैं इस ऑनलाइन के बारे में अधिक दस्तावेज नहीं ढूँढ सकता या उस पोस्ट के ओपी के संपर्क में नहीं आ सकता। अगर किसी को इस तरह के DOM-to-कैनवास ( डेमो , कोड ) कार्यान्वयन करने का कोई अनुभव है , तो मैं आपसे भी सुनना चाहूंगा। यह डेटा में हेरफेर करने और इसे (और इसलिए प्रदर्शन) कैसे रेंडर करने के लिए कस्टम नियंत्रण होने में सक्षम होने का एक अच्छा संकर प्रतीत होता है, लेकिन मुझे लगता है कि अगर डोम में सब कुछ लोड करने के लिए अभी भी चीजों को धीमा करने जा रहा है।
मुझे पता है कि कुछ मौजूदा सवाल हैं जो इस एक के समान हैं, लेकिन उनमें से कोई भी एक ही बात नहीं पूछता है। आपकी सहायता के लिए धन्यवाद।
अनुवर्ती : मैं जिस कार्यान्वयन का उपयोग कर रहा था वह https://github.com/zooniverse/LightCurves पर है