डी 3

Question

का उपयोग कर एक तैरने वाला लेन चार्ट बनाना मुझे निम्नलिखित के समान एक तैरने वाला लेन चार्ट उत्पन्न करने की आवश्यकता है, लेकिन वाई-अक्ष पर तारीखों को दिखाने के अतिरिक्त। मुझे दिखाने के लिए आवश्यक सभी नोड्स निर्भरताओं के साथ गतिविधियां हैं, प्रवाह नियंत्रण तत्व नहीं हैं।

यह कुछ d3 तरह का उपयोग कर सकता है या वहाँ एक बेहतर जावास्क्रिप्ट इस प्रकार के चार्ट के लिए उपयोग करने के लिए पुस्तकालय है? मैंने इस तरह के कोई उदाहरण नहीं देखा है, इसलिए यदि डी 3 का उपयोग करना संभव है तो मुझे यकीन नहीं है कि मैं कहां से शुरू करूंगा। कोई भी युक्ति सराहनीय होगी।

Answer 1

पिछले उत्तर और टिप्पणियों के आधार पर, मैंने Raphael.js का उपयोग करके चार्ट को लागू करने का मार्ग शुरू कर दिया। कोड के 600+ लाइनों (ज्यादातर ढांचे की हड्डियों की प्रकृति के लिए तैयार करने के लिए ढांचे के सामान) लिखने के बाद मुझे पता चला कि Raphael.js टेक्स्ट प्रतिपादन में बेहद धीमा है। निश्चित रूप से क्यों नहीं यकीन है, लेकिन यह स्पष्ट रूप से एक ज्ञात मुद्दा है। अंत में 300 रुपये के साथ एक चार्ट प्रस्तुत करने के लिए 3.5 रुपये ले रहा था जिसमें पाठ प्रस्तुत करने में 80% समय था।

मैंने फिर d3.js के साथ शुरू किया। मैंने पाया कि d3.js डेटा बाध्य चार्ट बनाते समय बेहतर विकल्प है जब विरासत ब्राउज़र समर्थन चिंता का विषय नहीं है। d3.js में तैरने वाले लेन चार्ट को बनाने से मुझे Raphael.js के लिए 600+ बनाम कोड की लगभग 100 पंक्तियां मिलीं। d3.js संस्करण में भी अधिक कार्यक्षमता है, अच्छी तरह से दिखता है, और अधिक प्रतिक्रियाशील है।

जबकि d3.js की घोषणात्मक शैली कुछ उपयोग करने में लगती है, यह डेटा सुपर आसान के साथ काम करता है। एक अतिरिक्त बोनस के रूप में, मेरा चार्ट अब लगभग 250 एमएस में प्रस्तुत करता है :)

अंतिम तैरने वाले लेन चार्ट के लिए http://bl.ocks.org/1962173 देखें।

Answer 2

मेरी राय में raphael.js यहां उपयुक्त है। यह आईई 6-8 सहित सभी ब्राउज़रों के लिए समर्थन प्रदान करता है, जबकि डी 3 केवल एसवीजी-सक्षम ब्राउज़र में काम करता है।