web-dev-qa-db-ja.com

d3 v4でCSVを読み取る方法

D3で CSV Parse のドキュメントを理解するのに少し苦労しています。私は現在持っています：

d3.parse("data.csv",function(data){
    salesData = data; 
});

しかし、私はエラーを取得し続けます：

不明なTypeError：d3.parseは関数ではありません

これはどのように見えるはずですか？私は少し混乱しており、見つけることができた唯一の例は this のようなものでした。

私は次のようなものも試しました：

d3.dsv.parse("data.csv",function(data){
    salesData = data; 
});

そして得た：

不明なTypeError：未定義のプロパティ 'parse'を読み取れません

なぜこうなった？どんな助けも大いに感謝されます、ありがとう!!

javascriptcsvd3.js
11
ocean800

ここにはいくつかの誤解があります：d3.csvはリクエストであり、d3.csvParseは文字列を解析します（また、D3 v3構文とD3 v4構文を混同しています）。これが違いです：

d3.csv（D3 v4）

d3.csv 関数。引数として(url[[, row], callback])を使用します。

指定されたurlでCSVfileの新しいリクエストを返しますデフォルトのMIMEタイプtext/csv。 （エンファシス鉱山）

したがって、ご覧のとおり、特定のURLで特定のCSVファイルを要求する場合は、d3.csvを使用します。

たとえば、次のスニペットは、引用符間のURLでCSVを取得します。

name, parent
Level 2: A, Top Level
Top Level, null
Son of A, Level 2: A
Daughter of A, Level 2: A
Level 2: B, Top Level

...解析されたCSVファイルをログに記録し、確認します。

d3.csv("https://Gist.githubusercontent.com/d3noob/fa0f16e271cb191ae85f/raw/bf896176236341f56a55b36c8fc40e32c73051ad/treedata.csv", function(data){
    console.log(data);
});
<script src="https://d3js.org/d3.v4.min.js"></script>

d3.csvParse

一方、 d3.csvParse （またはD3 v3ではd3.csv.parse）は、引数として(string[, row])を取ります。

指定された文字列を解析します。これは、適切な区切り文字を使用した区切り文字区切り値形式である必要があり、解析された行を表すオブジェクトの配列を返します。

そのため、文字列を解析する場合はd3.csvParseを使用します。

以下にデモを示します。この文字列があるとします：

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

解析する場合は、d3.csvParseではなくd3.csvを使用します。

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

var parsed = d3.csvParse(data);

console.log(parsed);
<script src="https://d3js.org/d3.v4.min.js"></script>
23
Gerardo Furtado

次のようにcsvデータをd3に取得できます-

// get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
      console.log(data);
      //format data if required...
      //draw chart
}
3
sparta93

d3.csv("data.csv", function(data){...})を使用してURLからCSVを取得して解析するか、d3.csv.parse()を使用してCSV形式の文字列を解析します。

1
surfthecity

また、d3.csv（ "csv_file.csv"、function（data）{//変更コード}を機能させることができませんでした。

クラスメートは、これまでに機能した以下を使用することを推奨しました。

d3.csv("data.csv").then(function(data){
//modifying code
}

以下のコメントに記載されているように、これはv4ではなくv5を実行している場合の修正です。

0
Heather Claxton

以下は、d3.jsを使用してcsvファイルを読み取るために使用できるコードです。

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
 d3.csv("csv/cars.csv", function(data) {
 console.log(data[0]);
});
</script>

Csvファイル名は「cars.csv」であり、ファイルはcsvというフォルダーに保存されることに注意してください。

console.log(data[0])

ブラウザのデバッグウィンドウでデータ出力を確認するのに役立ちます。また、エラーがあるかどうかも確認できます。

0
Amir Md Amiruzzaman