お酒好きのおしりトラブル対策とは

CSVファイルに
data
apple
orange
tomato

とデータが入っています。それをD3.jsで読み込みたいのですが
どうしてもうまくいきません。
d3.csv("data.csv", function(error, data){
var text = "";
for(var i=0; i<data.length; i++){
text += data[i].value+","
}
var englishArray = data;
});

データを読み出して、それをカンマでつないで、さらに、var englishArrayに入れたいのですが
うまくいきません。原因はわかりますでしょうか?

もともとは、
var englishArray = [ "apple", "orange", "tomato"]
とJSファイルの中で定義されているものを外部ファイル(CSV)から読み出したいです。

アドバイス頂けないでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ANo1です。



読込処理はできているとのことですから、d3のパース結果はANo1に示したような配列になっているはずです。
それなので、そのまま配列として使用できるはずと思います。(そうでなければ、パースする意味がない)

>”  ”の連想配列の値だけを取り出す必要があるのですね
わざわざ配列を作り直すのであるなら、パースしてから変換するといった二度手間をかけなくとも、前回のご質問のようにテキストで読み込んで、改行(あるいはカンマ)でsplitすることで簡単に配列化にすることが可能です。
ただし、データが複雑で単純なsplitではすまないという場合はまた別ですが、サンプルでご提示のデータはごく単純なものなので、問題なく可能ではないかと想像します。
 https://developer.mozilla.org/ja/docs/Web/JavaSc …
    • good
    • 0
この回答へのお礼

分かりやすいサイトのご紹介ありがとうございます。
その後、試行錯誤で、ようやくできました!!
d3.csv("data.csv", function(data) {
englishArray = data.map(function(d) { return d[カラム名]; });
console.log(dataset)
});
D3.jsを使うやり方ですが、最終的に、このやり方でできました。CSVファイルのカラム名の列にある行のデータを取り出すことが出来ました。
同じようなことに挑戦されている方がいらっしゃいましたら是非上のやり方を試してみてください。
いろいろとアドバイスありがとうございました。Firefoxは問題なくローカルに置いたCSVにファイルを読んでくれます。
クローンは、起動オプションを付ければできますが、index.htmlファイルを直接開くと参照してくれません。IEは、だめでした。ブラウザのセキュリティ関係でしょうか。

お礼日時:2015/08/24 10:43

回答がないようなので・・・




例示のcsvデータがcsvっぽくないですが(笑)、d3のcsvメソッドで読み込むと、csvとしてパースしてくれるので、ご提示のデータの場合
 [
  { data: "apple" },
  { data: "orange" },
  { data: "tomato" }
 ]
という内容のものが返されるはずです。
(前回も提示しましたが念のため)
 https://github.com/mbostock/d3/wiki/CSV


それよりも、前回のご質問ではweb環境ではないようなお話でしたが、環境を変えてデータの読込み処理そのものはできるようになったのでしょうか?
 https://oshiete.goo.ne.jp/qa/9034778.html
    • good
    • 0
この回答へのお礼

ありがとうございます。データ読み込みはcromeは起動オプションをつけてjD3.jsがローカルで動きました!FirefoxはそのままOKでした。IEでは今だに動きません。そしてコードですが、”  ”の連想配列の値だけを取り出す必要があるのですね。もう少し勉強してみたいと思います。
data.forEach(function(d){
values.push(d3.values(d));
})

お礼日時:2015/08/21 10:19

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptで複数のCSVを取得しひとつのCSVごとに1つのs

JavaScriptで複数のCSVを取得しひとつのCSVごとに1つのselectフォームを表示しようとしております。
以下のようなJSを使っているのですが、aryCsvNameの配列にはいっている名前で複数のCSVを呼び込みたいのですが、
getElementById("select***").のところで、うまく***の箇所に配列の値をもっていけません。

aryCsvNameの値と***があえば、それぞれの<div>に表示されるのではないかとは思っているのですが、
それも予想です。
恐れ入りますが、どなたかいい方法をご教授ください。

function loadCSV() {
aryCsvName = ["1","2","5","10"];
for (var j = 0; j < aryCsvName.length; j++) {
var path = './data/'+aryCsvName[j]+'.csv';
var httpObj = createXMLHttpRequest(handleResult);
if (httpObj) {
httpObj.open("GET", path, true);
httpObj.send(null);
}
}
}
function handleResult() {
if ((this.readyState == 4) && (this.status == 200)) {
var text = getAjaxFilter()(this.responseText);
csvData = parseCSV(text);

///ここが不明
//document.getElementById("select***").innerHTML = result;
//ここまで
}
}
function parseCSV(str) {
var CR = String.fromCharCode(13);
var LF = String.fromCharCode(10);
var lines = str.split(LF);
var csvData = new Array();

for (var i = 0; i < lines.length; i++) {
var cells = lines[i].split(",");
if( cells.length != 1 ) csvData.push(cells);
}
return csvData;
}

function createXMLHttpRequest(cbFunc) {
var XMLhttpObject = null;
try {
XMLhttpObject = new XMLHttpRequest();
} catch(e) {
try {
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}

function getAjaxFilter() {
if (navigator.appVersion.indexOf("KHTML") > -1) {
return function(t) {
var esc = escape(t);
return (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t
}
} else {
return function(t) {
return t
}
}
}

HTML部分
<div id="select1"></div>
<div id="select2"></div>
<div id="select5"></div>
<div id="select10"></div>

JavaScriptで複数のCSVを取得しひとつのCSVごとに1つのselectフォームを表示しようとしております。
以下のようなJSを使っているのですが、aryCsvNameの配列にはいっている名前で複数のCSVを呼び込みたいのですが、
getElementById("select***").のところで、うまく***の箇所に配列の値をもっていけません。

aryCsvNameの値と***があえば、それぞれの<div>に表示されるのではないかとは思っているのですが、
それも予想です。
恐れ入りますが、どなたかいい方法をご教授ください。

function loadCSV() {
aryC...続きを読む

Aベストアンサー

このケースで一番、簡単そうな解決策は、
それぞれのCSVファイルの中に、どのセレクト用なのかの
目印を書き込んでおき、それで判定だと思いますが、
それが出来ないなら、非同期通信は止めて同期通信
にして、1ファイル毎に確実に読み込む。(詳しく見てないけど)
 httpObj.open("GET", path, false);
かな

それがいやなら、XHR(XmlHttpRequest)の、レスポンスヘッダーを
コールバック関数の中で自分で調べて、何への要求か見つけて
処理を分けるといったところかな。

 this.getAllResponseHeaders()

どのブラウザーのXHRでも出来るかどうかは?

QD3.js 教えてください

下記のサンプルコードで、
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>

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

textファイルに100, 150, 200, 250, 300と入れて
それをscriptで参照するには、具体的にはどうしたらいいのでしょうか?
是非教えてください。



<!doctype html>
<html lang="ja">
<head>
<...続きを読む

Aベストアンサー

ANo1、2です。

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

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


人気Q&Aランキング

おすすめ情報