15

D3.js では、通常、外部の csv ファイルからデータをロードします。これは、大きなデータに対して非常に効率的であり、データが変更されたときにコードを変更する必要がありません。

ただし、csv を HTML ページに直接埋め込みたい場合 (小さな csv データのみを使用) が 2 つあります。

  • ローカル HTTP サーバーを実行する必要なく、ローカルで (つまり、file:/// から) ロードできるページ。
  • Stackoverflow で使用する D3.js の質問を説明する小さな jsfiddle の例。
4

1 に答える 1

23

これは、 D3.js APIの例を使用して、私が思いついたソリューションです。

csv データの埋め込み:

<pre id="csvdata">
    Year,Make,Model,Length
    1997,Ford,E350,2.34
    2000,Mercury,Cougar,2.38
</pre>

ページ上の生データを非表示にする:

#csvdata {
    display: none;
}

それを解析する：

var raw = d3.select("#csvdata").text();
var parsed = d3.csv.parse(raw);

オプションで、結果を表示します。

d3.select("#parsed").text(JSON.stringify(parsed));
// Assuming <div id="parsed"></div> somewhere on the page

これに欠陥があると思われる場合、またはより洗練された解決策がある場合は、喜んであなたの答えを受け入れます!

編集：このフィドルで実際に見てください

于 2013-04-26T07:47:17.570 に答える