下記のサンプルコードで、
var dataset = [100, 150, 200, 250, 300];
の生データの部分を、外部ファイル(例えば、data.txt)に入れて、
そこからデータを読み出したいのですが、
いろいろ調べると、D3.jsというものが、使えそうだということがわかったのですが、
イマイチやり方がわかりません。
textファイルに100, 150, 200, 250, 300と入れて
それをscriptで参照するには、具体的にはどうしたらいいのでしょうか?
是非教えてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>D3.jsのひな形</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var dataset = [100, 150, 200, 250, 300];
var svg = d3.select("body").append("svg").attr({
width: 500,
height: 300
});
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: 0,
y: function(d, i){ return i * 30; },
width: function(d, i){ return d; },
height: 20,
fill: "green"
})
</script>
</body>
</html>
No.3ベストアンサー
- 回答日時:
ANo1、2です。
HTML5でFile APIが実装されているようです。
使ったことがないので、知りませんでした。
http://www.html5rocks.com/ja/tutorials/file/dndf …
実際の実装状況はわかりませんが、javascriptだけでも対応可能かと…
No.2
- 回答日時:
ANo1です。
>全部ローカルに置いてやりたいのですが、prototypeやjQueryは
>ローカルファイルでもブラウザで動作するのでしょうか?
ライブラリによって、見かけの使い方やメソッドは違いますが、根本で利用している仕組みは同じなので、「〇〇なら動作する」といったことはないでしょう。
基本的にはWEB上での仕組みなので、WEBサーバへのhttpアクセスで動作するようになっています。
とはいうものの、ブラウザの種類やOSの環境などによっては、ローカルで動作する場合もあるようです。
ちなみに、ANo1の回答を書く際に、「ダメかな」と思いながらローカルで試してみましたが、私の環境では動きました。
. Win7(Enterprise)、Fx37 のローカル環境です。
ローカル限定でよいのなら、javascriptでなくともJScriptやVBなどを利用することで、他の方法でファイル操作することが可能だと思いますので、ファイルの読込なら、そのような方法で実現する方法もあるかと思います。
セキュリティの警告がでるとか、いろいろあるかもしれませんが・・・
fujillin様
HTML5でFile APIが実装されているとのことで、
いろいろ試してみました。なんとか、サーバーにファイルを置くと
成功するのですが、ローカルだと、だめでした。
ブラウザ起因なのか? 設定でなんとかいけるのか?
むずかしいですね。
No.1
- 回答日時:
こんにちは。
回答がないみたいなので・・・D3は知らないので「詳しい人」ではありませんが、興味があったのでごく簡単に調べてみました。
>いろいろ調べると、D3.jsというものが、使えそうだということが
>わかったのですが
D3はサンプルでご提示のコードのように、svgを利用してデータをビジュアル化するのに便利なライブラリで、もしも外部ファイルの読み込みだけが目的であるならば、D3以外にも数多くのライブラリが存在します。
それなので、必ずしもD3にこだわる必要はないと思います。(有名なのはprototypeとかjQueryとか・・)
◇D3の概要
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_ …
ライブラリの性格上、扱うデータがcsvやtsvであることが多いので、そのような場合の機能は豊富に備えているようです。
https://github.com/mbostock/d3/wiki/CSV
D3のAPIリファレンスが以下にありますので、ご参考になるかと思います。
https://github.com/mbostock/d3/wiki/API-Reference
ありがとうございます!!いろいろ試しているのですが、D3は、サーバーにファイルを置かないとだめみたいですね。htmlとjsと、csvファイルは、全部ローカルに置いてやりたいのですが、prototypeやjQueryはローカルファイルでもブラウザで動作するのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のJavascriptを1つのscrip...
-
javascriptとApacheの設定
-
javascriptファイルは1つに統...
-
別ファイルのfunctionの読み込み方
-
呼出したjsファイル内で他jsフ...
-
JavascriptとJqueryを混在し記述
-
IE8で外部jsファイルが読み込め...
-
ひとつの外部ファイルに複数の...
-
javascriptの外部ファイルで行...
-
ホームページビルダ 保存について
-
JavaScriptのエラー ( 関数の...
-
外部ファイル名を変数で指定で...
-
Dreamweaver で 外部JSを読み込...
-
javascriptで別ファイルから変...
-
スタイルシートを使ってマウス...
-
<a href="#" …>の意味を教えて...
-
bodyにidをつける理由は何ですか?
-
JavaScriptでiframeの内容を「...
-
<div>のタッチ状態を維持したま...
-
SCRIPT5007: 未定義または NULL...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
javascriptとApacheの設定
-
Dreamweaver で 外部JSを読み込...
-
javascriptファイルは1つに統...
-
プルダウンメニューを別ファイ...
-
javascriptのalertで文字化けが...
-
呼出したjsファイル内で他jsフ...
-
【Google Apps Script】「ライ...
-
複数のJavascriptを1つのscrip...
-
cssにjavascriptを入れる?呼び...
-
JavascriptとJqueryを混在し記述
-
JavaScriptのエラー ( 関数の...
-
ひとつの外部ファイルに複数の...
-
javascriptの外部ファイルで行...
-
ホームディレクトリを示すチル...
-
外部ファイル名を変数で指定で...
-
JavaScript内の関数を別のファ...
-
なぜ外部jsファイルはコメント...
-
外部.jsの内容を一部置き換えて...
-
外部読み込みで動かないときの...
おすすめ情報