2012-05-16 14 views
9

मैंने आज कई परीक्षण किए हैं जिस तरह से हम जेएसओ फाइलों को डी 3 के साथ लोड कर सकते हैं क्योंकि मैं इस प्रश्न से चिंतित था: d3.json works but $.getJson fails। हालांकि मैंने किए गए कुछ परीक्षण थोड़ा मुश्किल हैं।d3.json, d3.xhr और क्रॉस-डोमेन समस्याएं

d3.xhr("http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=select+*+where+%7B%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2FRoger_Federer%3E+%3Fp+%3Fo+filter%28lang%28%3Fo%29+%3D+%27en%27%29%7D%0D%0A&debug=on&timeout=&format=application%2Fsparql-results%2Bjson&save=display&fname=", function(data) 
console.log("success1"); 
alert(data); 
}); 

d3.json("http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=select+*+where+%7B%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2FRoger_Federer%3E+%3Fp+%3Fo+filter%28lang%28%3Fo%29+%3D+%27en%27%29%7D%0D%0A&debug=on&timeout=&format=application%2Fsparql-results%2Bjson&save=display&fname=", function(data){    console.log("success2"); 
alert(data); 
}); 


d3.xhr("http://api.worldbank.org/countries/BRA/indicators/BX.KLT.DINV.CD.WD?per_page=10&date=2007:2012&format=json", function(data){ 
console.log("success3"); 
alert(data); 
}) 

d3.json("http://api.worldbank.org/countries/BRA/indicators/BX.KLT.DINV.CD.WD?per_page=10&date=2007:2012&format=json", function(data){ 
console.log("success4"); 
alert(data); 
}) 

मुझे पता है कि समस्या कम से कम 2 कारणों से संबंधित हो सकते हैं: MIME प्रकार और CORS, लेकिन मैं कई अन्य बातों को समझ में नहीं कर सकते हैं:

  1. अगर कॉलबैक हमेशा निष्पादित किया जाता है (कभी-कभी ओके 200 के साथ भी मुश्किल होती है जो कि jQuery की .ajax() और .getJSON() विधियों से देखी गई त्रुटि भी हो सकती है) मैं केवल एक मामले (पहले वाला) में डेटा क्यों देख सकता हूं - बाकी के मामले हैं हमेशा त्रुटियां?

  2. d3.xhr विधि द्वारा समर्थित MIME प्रकार क्या हैं?

  3. यदि d3.json d3.xhr के लिए सिर्फ एक अच्छा रैपर था उदाहरण 1 काम और उदाहरण 2 क्यों काम नहीं करता है ...? मुझे कुछ स्पष्टीकरण चाहिए। मैं ज्यादातर अपने सर्वर से फ़ाइलों के साथ डी 3 का उपयोग करता हूं, लेकिन इस तरह के मामले हैं जब मुझे कुछ बाहरी डेटा का उपयोग करना पड़ता है, और यह सिर्फ डी 3 के साथ ऐसा करने के लिए वास्तव में अच्छा होगा, न कि सिर्फ jQuery के साथ।

मुझे लगता है कि इन तरीकों से स्वीकार किए गए सभी एमआईएम प्रकारों के साथ एक सूची होनी चाहिए।

+0

इस पूछने के लिए मेरी वजह साफ है: हम अगले महीनों में लिंक किए गए डेटा दृश्यावलोकन के लिए भारी डी 3 का उपयोग करेगा – paxRoman

उत्तर

12

पहला अनुरोध सफल होने के कारण दूसरा विफलता dbpedia.org सर्वर की कॉन्फ़िगरेशन के साथ करना है। - dbpedia

  1. यह माइम प्रकार application/json

  2. यह का उपयोग कर JSON.parse()

संख्या 1 प्रतिक्रिया को पार्स मुद्दा है करने के लिए Accept हैडर सेट: d3.json() समारोह दो काम करता है। संगठन सर्वर शीर्षलेख के लिए 406 (Unacceptable) की प्रतिक्रिया लौटा रहा है। मुझे यकीन नहीं है कि यह सच क्यों है, लेकिन यूआरएल पैरामीटर जो आप भेज रहे हैं, ऐसा लगता है कि सर्वर application/sparql-results+json की अपेक्षा करता है - वास्तव में application/json का उपयोग करते समय d3.xhr() सफल होने के साथ इस माइम-प्रकार को निर्दिष्ट करना विफल रहता है।

विश्व बैंक डेटा के साथ, अनुरोध विफल रहता है क्योंकि सर्वर CORS-enabled नहीं है। सीओआरएस सक्षम किए बिना रिमोट एपीआई को कॉल करने का एकमात्र ब्राउज़र तरीका जेएसओएनपी का उपयोग करना है (एपीआई इसे मानता है)। जैसा भी होता है, data.worldbank.com does support JSONP, लेकिन डी 3 नहीं करता है - आपको या तो स्वयं से निपटने की आवश्यकता होगी या अनुरोध करने के लिए jQuery जैसी तृतीय-पक्ष लाइब्रेरी का उपयोग करना होगा।

सामान्य रूप से, डी 3 ने वास्तव में मजबूत AJAX समर्थन को प्राथमिकता नहीं दी है जिस तरह से jQuery और अन्य पुस्तकालयों का समर्थन है, क्योंकि यह इसका ध्यान नहीं है - इसलिए यदि आप विभिन्न प्रकार के बाहरी संसाधनों को लोड करना चाहते हैं, तो आपको शायद ऐसा करना चाहिए तृतीय-पक्ष लाइब्रेरी जिसमें सावधानीपूर्वक tweaked AJAX कॉल के लिए अधिक समर्थन है। आप जो लोड करना चाहते हैं उसके आधार पर, दूसरा विकल्प अपने सर्वर पर प्रॉक्सी सेट करना है जो रिमोट एपीआई को कॉल कर सकता है और फिर डेटा को स्थानीय विज़ुअल कॉल के माध्यम से अपने विज़ुअलाइज़ेशन पर वापस दे सकता है - इस स्थिति में सभी डी 3 के लोडर को चाहिए बढ़िया कार्य करना।

+1

WorldBank के लिए, मैं का उपयोग कर सुझाव देंगे [d3.jsonp प्लगइन] (https://github.com/d3/d3-plugins/tree/master/jsonp)। हालांकि, [वर्ल्डबैंक कॉल स्ट्रक्चर] (http://data.worldbank.org/node/11) के साथ काम करने के लिए आप इसे संशोधित करना चाहते हैं। कॉलबैक फ़ंक्शन निर्दिष्ट करने के लिए कॉल स्ट्रक्चर यूआरएल क्वेरी स्ट्रिंग 'और prefix = callbackFunctionName' का उपयोग करता है, जबकि d3.jsonp प्लगइन '& callback = callbackFunctionName' की अपेक्षा करता है। तो आप 'prefix' के साथ 'कॉलबैक' शब्द को बदलकर लाइन 10 और 24 बदल सकते हैं (देखें [यह पेस्टबिन] (http://pastebin.com/MLs0LaKW))। फिर प्रतिक्रिया पर निष्पादित करने के लिए कॉलबैक फ़ंक्शन बनाएं। – wgardiner

0

समस्याग्रस्त उदाहरण 1

"समारोह (डेटा)" और "कंसोल" के बीच एक खोलने घुंघराले ब्रेस याद आ रही है।

यह मेरे लिए काम करता है एक बार function(data) { console आदि के रूप में लिखा