11

この質問に興味をそそられたので、今日、d3 でjsonファイルをロードする方法に関連するいくつかのテストを行いました。ただし、私が行ったテストのいくつかは少しトリッキーです。

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. コールバックが常に実行される場合 (jQuery の .ajax() および .getJSON() メソッドから見られるように、エラーになる可能性がある OK 200 で場合によっては厳しい場合もあります) 1 つのケース (最初のケース) でのみデータを表示できるのはなぜですか? - 残りのケースは常にエラーですか?

  2. d3.xhr メソッドでサポートされている MIME タイプは何ですか?

  3. d3.json が d3.xhr の単なるラッパーである場合、なぜ例 1 が機能し、例 2 が機能しないのですか? 説明をお願いします。私は主にサーバーからのファイルで d3 を使用しますが、外部データも使用する必要がある場合は、このような場合があり、jQuery だけでなく D3 でもこれを行うと非常に便利です。

これらのメソッドで受け入れられるすべての MIME タイプのリストが必要だと思います。

4

1 に答える 1

14

最初の要求が成功し、2 番目の要求が失敗する理由は、dbpedia.org サーバーの構成に関係しています。このd3.json()関数は次の 2 つのことを行います。

  1. Acceptヘッダーを MIME タイプに設定しますapplication/json

  2. を使用して応答を解析しますJSON.parse()

番号 1 が問題です。dbpedia.org サーバーがヘッダー406 (Unacceptable)に対しての応答を返しています。Accept: application/jsonこれが正しい理由はわかりませんが、送信している URL パラメーターを考えると、サーバーがapplication/sparql-results+json代わりに期待しているように見えます。実際、この MIME タイプを指定するとd3.xhr()成功し、使用するとapplication/json失敗します。

世界銀行のデータでは、サーバーがCORS 対応ではないため、リクエストは失敗します。CORS を有効にせずにブラウザー内でリモート API を呼び出す唯一の方法は、JSONP を使用することです (API がそれをサポートしていると仮定します)。たまたま data.worldbank.comは JSONPをサポートしていますが、D3 はサポートしていません。自分で処理するか、jQuery などのサードパーティ ライブラリを使用してリクエストを行う必要があります。

一般に、D3 は jQuery や他のライブラリのように非常に堅牢な AJAX サポートを優先していません。慎重に調整された AJAX 呼び出しをより多くサポートしています。ロードしたいものに応じて、リモート API を呼び出すことができる独自のサーバーにプロキシを設定し、ローカル HTTP 呼び出しを介してデータをビジュアライゼーションに返すという別のオプションがあります。この場合、D3 のすべてのローダーはうまく動作します。

于 2012-05-17T22:30:42.587 に答える