Q&A
回答ありがとうございます。
一つ目の原因についてですが、どのようにすればセキュリティをかいくぐってcsvファイルを読み込むことが出来ますか？
なぜかd3.jsのプログラムが適用されません。どこが間違えているか教えてください。
HTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js サンプル</title> <style> table,td { border : 1px solid black; } </style> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <h1>D3.jsサンプル</h1> <div id="result"></div> <script src="js/pra.js"></script> </body> </html>JavaScript:
d3.csv("stock.csv", function(error, list){
d3.select("#result") // div#result内に出力
.append("table") // table要素を追加
.selectAll("tr") // tr要素を対象にする
.data(list) // 出力するデータ
.enter() // データ数だけ要素を生成
.append("tr")
.append("td")
.text(function(d){ // データ内容を出力
return d["数字"];
})
});
csv：
数字
1
2
3
4
回答2件
0
Chromeの拡張機能であるWeb Server for Chromeを使えば、CORSについてのセキュリティ制限を回避してcsvファイルを読み込めました。
投稿2020/03/25 01:28
総合スコア6
0
ベストアンサー
試してみました
-
HTMLをダブルクリックなどでブラウザを開いて確認してる場合はセキュリティの関係で
stock.csvが読み込めないのが原因(CORS) -
HTTPサーバー上(HTTPアクセス)でファイルもちゃんとある場合はcsvファイルがUTF-8でなかったときは出なかった(
return d["数字"];でUTF-8でないと文字化けして配列にアクセスできないので表示されない)
投稿2019/12/09 02:32
総合スコア5545
<input type="file" name="datafile">で自身で読み込ませたら読み込んだデータを使うこと可能です
https://ja.stackoverflow.com/questions/24213/d3-js%E3%82%92%E7%94%A8%E3%81%84%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89csv%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。