IE8 समर्थन के लिए fabric.js के माध्यम से d3.js आउटपुट पुशिंग?

Question

मैं Raphael.js के विकल्प के रूप में का मूल्यांकन कर रहा हूं जो IE8 के साथ संगत इंटरैक्टिव विज़ुअलाइज़ेशन बनाने के लिए है, जो एसवीजी या कैनवास का समर्थन नहीं करता है (आईई 8 समर्थन दुर्भाग्य से गैर-विचारणीय है)।

राफेल विज़ुअलाइज़ेशन लाइब्रेरी D3.js के साथ काम करने के लिए किया जा सकता है - जो एसवीजी आउटपुट और IE8 के साथ असंगत है - ब्रिजिंग पुस्तकालय D34Raphael के माध्यम से, डी 3 का एक कांटा राफेल के साथ उपयोग के लिए अनुकूलित। D34Raphael कुछ (लेकिन सभी नहीं) D3 सुविधाओं को डीओएम की बजाय राफेल की सारणीकृत वस्तुओं में आउटपुट करने के लिए अनुकूलित करता है, ताकि आईई 8 पर राफेल डी 3 के आउटपुट को वीएमएल के रूप में समझ सके।

(संपादित फ़र, 2014 - D34Raphael अब मर चुका हो रहा है, लेकिन वहाँ एक awesomely विकल्प नामित R2D3 कि सक्रिय विकास के अंतर्गत हो रहा है)

कपड़ा IE8 पर उत्पादन कैनवास कर सकते हैं (excanvas का उपयोग कर कन्वर्ट करने के लिए वीएमएल के लिए), और एसवीजी को इंटरैक्टिव कैनवास तत्वों में परिवर्तित कर सकते हैं। तो, ऐसा लगता है कि फैब्रिक डी 3 और आईई 8 ब्रिजिंग में राफेल को प्रतिस्थापित कर सकता है। ऐसा करने से कैनवास कार्यक्षमता के साथ-साथ एसवीजी का भी समर्थन करने की अतिरिक्त लचीलापन आएगी।

---

मैं D34Raphael के लिए किसी भी कपड़ा बराबर नहीं मिला है - निकटतम मैं is this demo page जो IE8 में काम नहीं करता है पा सकते हैं।

फैब्रिक डॉक्स के बारे में मैंने जो देखा है, ऐसा लगता है जैसे डी 34 रैफेल फैब्रिक के लिए प्रयास किया जा सकता है: यह एसवीजी पथ, सर्कल, बहुभुज, पॉलीलाइन, अंडाकार, आयत, रेखा, और छवि तत्वों को परिवर्तित करने का समर्थन करता है, और सारणीबद्ध वस्तुओं के साथ काम करता है जो चल रहे अंतःक्रियाशीलता की अनुमति देता है। benchmarks comparing performance of Fabric handling vector paths compared to Raphael handling the same प्रभावशाली हैं (हालांकि कोई तुलना बेंचमार्क नहीं दिया गया है जिसमें बातचीत या एनीमेशन शामिल है)।

उदाहरण के रूप में ठेठ डी 3 परियोजनाओं के एक जोड़े:

• Force directed graphs
• Radial node-link tree diagrams

---

मुझे यकीन है कि मैं पहली बार नहीं कर रहा हूँ कर रहा हूँ इस में देखा गया है। मुझे इस तरह कुछ लागू करने की कोशिश में लॉन्च करने का विचार पसंद नहीं है, केवल यह पता लगाने के लिए कि कुछ अपरिहार्य समस्या है कि फैब्रिक, कैनवास और/या डी 3 के साथ किसी और को अनुभवी शुरुआत से ही इंगित किया जा सकता था।

• क्या कोई मौजूदा परियोजनाएं हैं जो डी 3 आउटपुट को fabric.js का उपयोग करके प्रस्तुत करने की अनुमति देती हैं, D34Raphael के समान?
• क्या एस 3 जी के साथ डी 3 कैसे काम करता है इस बारे में कुछ भी है कि कैनवास रूपांतरण और ऑब्जेक्ट मॉडल में फैब्रिक के एसवीजी के माध्यम से बस पाइप नहीं किया जा सकता था?
• क्या डी 3 प्रोजेक्ट को फेंकने और इसके आउटपुट को अनुकूलित करने के D34Raphael दृष्टिकोण की तुलना में फैब्रिक के माध्यम से डी 3 आउटपुट को धक्का देने का कोई आसान तरीका है?

---

मैं क्या कोशिश की है: कुछ मुद्दों मैं पहले से ही देखा है:

• कपड़ा में बहुत डी 3 के लिए अनुकूल करने की क्षमता में सीमित किया जा रहा D34Raphael के रूप में एक ऐसी ही समस्या है जाएगा डीओएम पूछताछ उपकरण (चूंकि यह अमूर्त वस्तुओं के साथ काम करता है, डीओएम तत्व नहीं) - लेकिन यह ऐसा कुछ है जिसे अच्छी तरह व्यवस्थित ऑब्जेक्ट संरचना के साथ काम किया जा सकता है।
• राफेल और फैब्रिक दोनों आईई 8 में वीएमएल का उपयोग करते हैं, लेकिन विभिन्न इंजनों के माध्यम से, इसलिए रैफेल और फैब्रिक के एक्वावास वीएमएल में लागू करने में कामयाब रहे हैं। अब तक मेरे परीक्षण में, दोनों आईई 8 में एनीमेशन और इंटरएक्टिविटी के साथ खराब प्रदर्शन करते हैं, लेकिन विशेषताएं तुलनीय लगती हैं, और फैब्रिक rendering VML text in IE8 के लिए राफेल से काफी बेहतर प्रतीत होता है।
• एसवीजी से परिवर्तित आकार के साथ फैब्रिक का प्रदर्शन बहुत अच्छा लगता है, और ऐसा लगता है जैसे डी 3 पर आधारित रेड्रॉप्स, इंटरएक्टिविविटी और एनीमेशन चिकनी होना चाहिए क्योंकि इन्हें प्रारंभिक ड्रॉ में समान प्रक्रियाओं की आवश्यकता होती है (लेकिन ऐसा कुछ हो सकता है जिसे मैंने नहीं सोचा यहाँ)।
• ऐसा प्रतीत होता है कि फैब्रिक के समूह देशी एसवीजी समूहों की तरह अधिक हैं जो राफेल के सेट की तुलना में डी 3 के साथ काम करते हैं (लेकिन मैंने यहां कुछ अनदेखा किया होगा)।

---

Answer 1

अस्वीकरण: मैं Fabric.js

बहुत दिलचस्प सवाल के लेखक हूँ। अपने अंकों को हल करने के लिए:

क्या कोई मौजूदा परियोजनाएं हैं जो डी 3 आउटपुट को fabric.js का उपयोग करके प्रस्तुत करने की अनुमति देती हैं, D34Raphael के समान?

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

वहाँ कि बस कैनवास रूपांतरण और ऑब्जेक्ट मॉडल तक फैब्रिक के एसवीजी के माध्यम से पहुंचाया नहीं जा सका कैसे डी 3 एसवीजी साथ काम करता है के बारे में कुछ भी है?

मैं वास्तव में डी 3 से परिचित नहीं हूं, लेकिन आपके द्वारा लिंक किए गए उदाहरणों में से एक को देखकर, मैं वास्तव में कुछ संगतता मुद्दों को देखता हूं। मैं "बल निर्देशित रेखांकन" की पूरी एसवीजी मार्कअप की नकल की और kitchensink

मंडलियां ठीक से-ish गाया जाता है में यह भरी हुई है, लेकिन कुछ लाइनों के साथ बंद है। उत्सुकता से, सभी लाइनों को पार्स किया गया है और कैनवास पर सही ढंग से लोड किया गया है। लेकिन वे दिखाई नहीं दे रहे हैं। क्यूं कर? क्योंकि D3.js में उनकी शैलियों को ".line" वर्ग के माध्यम से परिभाषित किया गया है और हम फैब्रिक में स्टाइलशीट पार्सिंग का समर्थन नहीं करते हैं।

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

हम "उतारना" करना हो तो प्रत्येक पंक्ति के पास उन शैलियों (या तो "स्ट्रोक" और "स्ट्रोक-अस्पष्टता" विशेषताओं का या शैली = "स्ट्रोक के माध्यम से: ...; स्ट्रोक-अस्पष्टता: ...; ") यह उम्मीद के रूप में काम करेगा।

मुझे लगता है कि मंडलियों के चारों ओर सफेद रूपरेखाओं की समस्या समान जड़ें हैं।

क्या डी 3 प्रोजेक्ट को फेंकने और इसके आउटपुट को अनुकूलित करने के D34Raphael दृष्टिकोण की तुलना में फैब्रिक के माध्यम से डी 3 आउटपुट को धक्का देने का कोई आसान तरीका है?

वास्तव में कुछ भी नहीं सोच सकता है।