d3.js
JSONとCSVでのD3の使用
サーチ…
構文
- d3.csv（url [[、row]、callback]）
- d3.tsv（url [[、row]、callback]）
- d3.html（url [、callback]）
- d3.json（url [、callback]）
- d3.text（url [、callback]）
- d3.xml（url [、callback]）
CSVファイルからデータを読み込む
DOM要素にバインドするデータを取得する方法はいくつかあります。もっと単純なのは、あなたのスクリプトのデータを配列として持つことです...
var data = [ ... ];
しかし、 D3.jsでは、外部ファイルからデータを読み込むことができます。この例では、CSVファイルからデータを適切に読み込んで処理する方法を示します。
CSVファイルはコンマ区切りの値です。この種のファイルでは、各行はデータレコードであり、各レコードはカンマで区切られた1つ以上のフィールドで構成されます。使用する関数d3.csvがヘッダーとしてCSVの最初の行、つまりフィールドの名前を含む行を使用することを知っておくことが重要です。
だから、 "data.csv"という名前のこのCSVを考えてみましょう。
city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70
"data.csv"をロードするには、関数d3.csvを使用します。簡単にするために、 "data.csv"がスクリプトの同じディレクトリにあり、相対パスが単に "data.csv"であるとします。そこで、次のように書いています。
d3.csv("data.csv", function(data){
//code dealing with data here
});
コールバックでは、引数としてdataを使用しました。これはD3の一般的な方法ですが、他の名前を使用することもできます。
CSVでd3.csvは何ですか？これは、オブジェクトの配列内のCSVを変換します。たとえば、私たちのデータをconsole.logするとします：
d3.csv("data.csv", function(data){
console.log(data)
});
これが私たちが見るものです：
[
{
"city": "New York",
"population": "3400",
"area": "210"
},{
"city": "Melbourne",
"population": "1200",
"area": "350"
},{
"city": "Tokyo",
"population": "5200",
"area": "125"
},{
"city": "Paris",
"population": "800",
"area": "70"
}
]
これで、そのデータをDOM要素にバインドできます。
この例では、 populationおよびareaは文字列です。しかし、おそらく、それらを数字として扱いたいと思うでしょう。コールバック内の関数（ forEach ）でそれらを変更できますが、 d3.csvでは "accessor"関数を使用できます：
d3.csv("data.csv", conversor, function(data){
//code here
});
function conversor(d){
d.population = +d.population;
d.area = +d.area;
return d;
}
また、にアクセサを使用することができますd3.tsvはなく、中にd3.json 。
注意： d3.csvは非同期関数です。つまり、CSVファイルがロードされる前にすぐに実行されるコードです。したがって、コールバック内でdataを使用するための特別な注意が必要です。
d3.request（）のコールバックエラー処理における1つまたは2つのパラメータ
d3.request()または便利なコンストラクタ（ d3.json 、 d3.csv 、 d3.tsv 、 d3.html 、 d3.xml ）のいずれかを使用すると、エラーの原因が多数あります。発行された要求またはネットワークエラーによる応答に問題がある可能性があります。コンテンツが整形式でないと、解析が失敗する可能性があります。
したがって、前述の方法のいずれかに渡されるコールバック内では、エラー処理を実装することが望ましいです。この目的のために、コールバックは2つの引数を受け入れることができます。最初のものはエラーで、存在する場合は2番目のものがデータです。ロードまたは解析中にエラーが発生した場合、そのエラーに関する情報は、 dataがnull最初の引数errorとして渡されnull 。
d3.json{"some_file.json", function(error, data) {
if (error) throw error; // Exceptions handling
// Further processing if successful
});
あなたは、2つのパラメータを提供する義務はありません。要求メソッドを、1つのパラメータのみを特徴とするコールバックとともに使用することは、まったく問題ありません。この種のコールバックを処理するために、request.jsのprivate関数fixCallback()があります。この関数は、メソッドの単一引数に情報が渡される方法を調整します。
function fixCallback(callback) {
return function(error, xhr) {
callback(error == null ? xhr : null);
};
}
これは、1つのパラメータのみを持つすべてのコールバックに対してD3によって呼び出されます。これは定義上データです。
リクエストメソッドのコールバックに何個のパラメータを指定しても、 dataパラメータのルールは次のようになります。
- 要求が失敗した場合、
dataはnullになりnull - 要求が成功すると、
dataにはロードされた（および解析された）内容が含まれます
1パラメータと2パラメータのバージョンの唯一の違いは、発生する可能性のあるエラーに関する情報が提供される方法です。 errorパラメータを省略すると、メソッドは自動的に失敗し、 dataはnullままになりnull 。一方、コールバックが2つの引数を持つように定義されている場合、ロードまたは解析中のエラーに関する情報が最初のパラメータに渡され、適切に処理できます。
d3.jsonへの次の4つの呼び出しは、存在する/存在しないファイルに対して可能なシナリオを1つのパラメータ/ 2つのパラメータのコールバックに対して示しています。
// FAIL: resource not available or content not parsable
// error contains information about the error
// data will be null because of the error
d3.json("non_existing_file.json", function(error, data) {
console.log("Fail, 2 parameters: ", error, data);
});
// FAIL: resource not available or content not parsable
// no information about the error
// data will be null because of the error
d3.csv("non_existing_file.json", function(data) {
console.log("Fail, 1 parameter: ", data);
});
// OK: resource loaded successfully
// error is null
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(error, data) {
console.log("OK, 2 parameters: ", error, data);
});
// OK: resource loaded successfully
// no information about the error; this fails silently on error
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(data) {
console.log("OK, 1 parameter: ", data);
});