d3.json, d3.xhr-und cross-domain-Probleme
Ich machte mehrere tests, die heute im Zusammenhang mit der Art, wie wir können, laden von json-Dateien mit d3, weil ich so fasziniert war von dieser Frage: d3.json funktioniert, aber $.getJson ausfällt. Aber einige der tests, die ich gemacht habe, sind ein bisschen tricky.
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);
})
Weiß ich, dass das problem im Zusammenhang mit mindestens 2 Gründe: MIME-Typ und CORS, aber ich kann nicht verstehen, einige andere Dinge:
-
wenn das callback wird immer ausgeführt (auch manchmal sehr hart mit den OK 200, und das kann auch ein Fehler von jQuery .ajax() und .getJSON () - Methoden) warum kann ich die Daten sehen, die nur in einem Fall (der erste) - den rest der Fälle sind immer Fehler?
-
was sind die unterstützten MIME-Typen von d3.xhr-Methode?
-
wenn d3.json war nur ein netter wrapper für d3.xhr warum Beispiel 1 funktioniert, Beispiel 2 funktioniert nicht...? Ich möchte einige Klarstellungen. Ich benutze meistens d3 mit Dateien von meinem server, aber es gibt Fälle wie diese, wenn ich auch verwenden einige externe Daten, und es wäre wirklich schön, dies zu tun, auch mit D3, nicht nur mit jQuery.
Ich denke, es sollte eine Liste mit den MIME-Typen akzeptiert, die von diesen Methoden.
- mein Grund für diese Frage ist einfach: wir verwenden D3 stark für linked-data-Visualisierungen in den nächsten Monaten
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der Grund, warum die erste Anfrage erfolgreich ist, während die zweite ausfällt, hat zu tun mit einer Konfiguration des dbpedia.org server. Die
d3.json()
Funktion der zwei Dinge tut:Er stellt die
Accept
- header, um den MIME-Typapplication/json
Analysiert die Antwort mithilfe von
JSON.parse()
Nummer 1 ist das Problem - die dbpedia.org server wieder eine Antwort von
406 (Unacceptable)
für dieAccept: application/json
header. Ich bin mir nicht sicher, warum das ist wahr, aber da die URL-Parameter, die Sie senden, wie es aussieht, erwartet der serverapplication/sparql-results+json
statt - in der Tat, die Angabe dieses mime-Typs mitd3.xhr()
gelingt es, während der Verwendungapplication/json
ausfällt.Mit den Daten der Weltbank, schlägt die Anforderung fehl, da der server nicht CORS-fähigen. Die nur im browser Weg, um einen Anruf an einem remote-API ohne CORS aktiviert, ist die Verwendung von JSONP (vorausgesetzt die API unterstützt). Wie es geschieht, data.worldbank.com Unterstützung für JSONP, aber D3 nicht - Sie müssen sich beschäftigen mit sich selbst oder mit einem 3rd-party-Bibliothek wie jQuery, die Anfrage zu machen.
Im Allgemeinen, D3 hat nicht priorisiert wirklich robust AJAX-Unterstützung, die Möglichkeit, dass sich jQuery und andere Bibliotheken haben, denn das ist nicht Ihr Fokus - wenn Sie so wollen, laden eine Vielzahl von externen Ressourcen, sollten Sie wahrscheinlich tun Sie es mit einem 3rd-party-Bibliothek, die mehr Unterstützung für die sorgfältig eingestellten AJAX-Aufrufe. Je nachdem, was Sie wollen, zu laden, die andere option ist die Einrichtung eines proxy auf Ihrem eigenen server, können rufen Sie die remote-APIs und geben Sie dann die Daten wieder in Ihre Visualisierungen, die über einen lokalen HTTP-aufrufen - in dem Fall alle D3 loader sollte funktionieren.
&prefix=callbackFunctionName
festlegen der callback-Funktion, während der d3.jsonp-plugin erwartet&callback=callbackFunctionName
. So können Sie Linien 10 und 24, ersetzen Sie das Wortcallback
mitprefix
(siehe dieses pastebin). Dann erstellen Sie eine Rückruffunktion, die ausgeführt werden, auf Antwort.Problematisch Beispiel 1 ist das fehlen einer geschweiften Klammer zwischen
Klappt es bei mir einmal auch so geschrieben
function(data) { console
etc.