プレーンテキストを読み込む

2015年10月16日

プレーンテキストとは古くからある形式です。
プレーンテキストは、データフォーマットなどが
何もない、単に文字が書かれたファイルです。
純粋にテキストファイルを処理したい場合や、独自の
フォーマットの場合に、D3.jsに読み込んで処理できます。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>d3.jsでプレーンデータを読み込む</title>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}

	</style>
	<script src="../js/d3.js"></script>

</head>
<body>

	<h2>プレーンデータを読み込む</h2>
	<svg id="graph"></svg>

	<script src="test.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>d3.jsでプレーンデータを読み込む</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

</style>

</head>

<body>

<h2>プレーンデータを読み込む</h2>

</body>

</html>

	/*
		d3.text()メソッドも、TSV,CSV形式の()メソッドと同じ
		引数を使用します。
		d3.text()メソッド
		第１引数：読み込むtextファイルのURL
		第２引数：ファイル読込完了時に呼ぶ関数

		第１引数に指定したファイルは非同期通信を行う
		XMLHttpRequestオブジェクトにURLのデータが格納されます。	

		読込完了後に呼ばれる関数の第２引数(plainText)は
		読み込まれたテキストファイルの全体のデータが渡されます。
	*/
	d3.text("test.txt",function(error,plainText){

		var data = plainText.split("\x0a"); //\0x0aは改行コード
		var arrData= [ ];

		var sales = data[0].split("/");  //最初の１行を /区切りに分割

		for( var i=1 ; i < sales.length ; i++){

			//salesのデータを抽出する
			arrData.push( sales[i] );
		}

		//棒グラフを描画する。
		d3.select("#graph")
		.selectAll("rect")
		.data(arrData)
		.enter()
		.append("rect")
		.attr("class","fillPink")
		.attr("width",function(d,i){
			return d;
		})
		.attr("height",16)
		.attr("x",0)
		.attr("y",function(d,i){
			return i * 24;
		});
	});

d3.text()メソッドも、TSV,CSV形式の()メソッドと同じ

引数を使用します。

d3.text()メソッド

第１引数：読み込むtextファイルのURL

第２引数：ファイル読込完了時に呼ぶ関数

第１引数に指定したファイルは非同期通信を行う

XMLHttpRequestオブジェクトにURLのデータが格納されます。

読込完了後に呼ばれる関数の第２引数(plainText)は

読み込まれたテキストファイルの全体のデータが渡されます。

d3.text("test.txt",function(error,plainText){

var data = plainText.split("\x0a"); //\0x0aは改行コード

var arrData= [ ];

var sales = data[0].split("/"); //最初の１行を /区切りに分割

for( var i=1 ; i < sales.length ; i++){

//salesのデータを抽出する

arrData.push( sales[i] );

}

//棒グラフを描画する。

d3.select("#graph")

.selectAll("rect")

.data(arrData)

.enter()

.append("rect")

.attr("class","fillPink")

.attr("width",function(d,i){

return d;

})

.attr("height",16)

.attr("x",0)

.attr("y",function(d,i){

return i * 24;

});

コーヒー/10/40/120/40/200
ジュース/210/180/20/140/100
ビール/150/40/220/240/130
お茶/290/240/60/170/180
カクテル/120/140/80/260/270

コーヒー/10/40/120/40/200

ジュース/210/180/20/140/100

ビール/150/40/220/240/130

お茶/290/240/60/170/180

カクテル/120/140/80/260/270