D3.js　教えてください

Question

下記のサンプルコードで、 var dataset = [100, 150, 200, 250, 300]; の生データの部分を、外部ファイル(例えば、data.txt)に入れて、そこからデータを読み出したいのですが、いろいろ調べると、D3.jsというものが、使えそうだということがわかったのですが、イマイチやり方がわかりません。 textファイルに100, 150, 200, 250, 300と入れてそれをscriptで参照するには、具体的にはどうしたらいいのでしょうか？是非教えてください。 D3.jsのひな形

fujillin · Accepted Answer

ANo1、2です。

HTML5でFile APIが実装されているようです。
使ったことがないので、知りませんでした。
　http://www.html5rocks.com/ja/tutorials/file/dndfiles/

実際の実装状況はわかりませんが、javascriptだけでも対応可能かと…

fujillin · Answer

ANo1です。

＞全部ローカルに置いてやりたいのですが、prototypeやjQueryは
＞ローカルファイルでもブラウザで動作するのでしょうか？
ライブラリによって、見かけの使い方やメソッドは違いますが、根本で利用している仕組みは同じなので、「〇〇なら動作する」といったことはないでしょう。
基本的にはWEB上での仕組みなので、WEBサーバへのhttpアクセスで動作するようになっています。
とはいうものの、ブラウザの種類やＯＳの環境などによっては、ローカルで動作する場合もあるようです。

ちなみに、ANo1の回答を書く際に、「ダメかな」と思いながらローカルで試してみましたが、私の環境では動きました。
.　Win7（Enterprise)、Fx37　のローカル環境です。

ローカル限定でよいのなら、javascriptでなくともJScriptやVBなどを利用することで、他の方法でファイル操作することが可能だと思いますので、ファイルの読込なら、そのような方法で実現する方法もあるかと思います。
セキュリティの警告がでるとか、いろいろあるかもしれませんが・・・

fujillin · Answer

こんにちは。　回答がないみたいなので・・・

Ｄ3は知らないので「詳しい人」ではありませんが、興味があったのでごく簡単に調べてみました。

＞いろいろ調べると、D3.jsというものが、使えそうだということが
＞わかったのですが
Ｄ3はサンプルでご提示のコードのように、svgを利用してデータをビジュアル化するのに便利なライブラリで、もしも外部ファイルの読み込みだけが目的であるならば、Ｄ3以外にも数多くのライブラリが存在します。
それなので、必ずしもＤ3にこだわる必要はないと思います。（有名なのはprototypeとかjQueryとか・・）
◇Ｄ3の概要
　http://ja.d3js.node.ws/

データを扱う関係から、外部データの読み込み機能も備えていますが、例えばテキストファイルであるなら、
d3.text("data.txt", function(error, txt){
　//txtにファイルの内容がセットされるので、読込み後の処理を
　//コールバックで記述する
　//dataset = txt.split(",").map(function(n){ return parseInt(n);}); とか
　//
  }
})
のような方法で、一応、読み込めるはずです。
　https://github.com/mbostock/d3/wiki/Requests#d3_text

ライブラリの性格上、扱うデータがcsvやtsvであることが多いので、そのような場合の機能は豊富に備えているようです。
　https://github.com/mbostock/d3/wiki/CSV

Ｄ3のＡＰＩリファレンスが以下にありますので、ご参考になるかと思います。
　https://github.com/mbostock/d3/wiki/API-Reference

D3.js 教えてください

ANo1、2です。

ANo1です。

こんにちは。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

D3.js　教えてください