HTMLファイルを読み込む
D3.jsではHTMLファイルを読み込むこともできます。
データは、CSVなどから読み込むことが一般的です。
時には、HTMLファイルのtable要素を使ったデータを利用したい
ことがあるかと思います。
扱いにくいと思いますが、ブラウザから見るとデータが
見やすいというメリットがあります。
XMLファイルを読み込む
XML形式は汎用的なデータ形式です。JSONが登場する前までは
ウェブでよく利用されていましたあ。HTMLもXMLの一種ですし、
D3.jsで扱っているSVGもXMLの一種です。XML形式は自由度が
仕様がしっかりしているので、データとしては扱いやすいですが、
XML形式のデータはサイズが大きくなることがあるので、
読み込んでからグラフを表示するまでに時間がかかってしまうことが
あります。スマホサイトを対象にする場合は、JSON形式のデータを
読み込んだ方がいいかもしれません。
サンプルコードの実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>d3.jsでJSONデータを読み込む</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>HTMLデータを読み込む </h2> <h2>例 果物販売数 </h2> <svg id="graph"></svg> <script src="readHTML.js"></script> <h2>XMLデータを読み込む </h2> <h2>例 果物販売数 </h2> <svg id="graphFruit"></svg> <script src="readXML.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* d3.html()メソッドも、TSV,CSV形式の()メソッドと同じ 引数を使用します。 d3.html()メソッド 第1引数:読み込むhtmlファイルのURL 第2引数:ファイル読込完了時に呼ぶ関数 第1引数に指定したファイルは非同期通信を行う XMLHttpRequestオブジェクトにURLのデータが格納されます。 HTMLファイルを読込ますが、link要素や、iframe要素で 指定されているデータをファイルやデータは読み込まれません。 読込実行後に実行する関数の第2引数のパラメーターには 読みこまれたHTMLファイルが、 分離されたドキュメントオブジェクトモデルとして渡され、 一般的なDOM層を行うメソッドを利用することができます。 querySelector()()メソッドとかです。 */ d3.html("data.html",function(error,docFragment){ /* HTMLファイルからtable要素に記述されたデータを読み出すには、 DOM操作を行い要素の内容を読み込めばいいです。 */ var tr = docFragment.querySelectorAll("table tr"); var arrData= [ ]; for( var i=1 ; i < tr.length ; i++){ /* querySelectorAll()を使いtable要素のtr要素、 td要素にアクセスしてデータセットに値を 代入していきます。 */ var d = tr[i].querySelectorAll("td")[0].firstChild.nodeValue; arrData.push( d ); } //棒グラフを描画する。 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; }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/* d3.xml()メソッドも、TSV,CSV形式の()メソッドと同じ 引数を使用します。 d3.xml()メソッド 第1引数:読み込むxmlファイルのURL 第2引数:ファイル読込完了時に呼ぶ関数 第1引数に指定したファイルは非同期通信を行う XMLHttpRequestオブジェクトにURLのデータが格納されます。 読込実行後に実行する関数の第2引数のパラメーターには 読みこまれたXMLファイルのルートノードが渡されます。 SML形式もDOMツリーとして渡されるため、 HTML形式と同様、一般的なDOM層を行うメソッドを 利用することができます。 querySelector()()メソッドとかです。 */ d3.xml("data.xml",function(error,xmlRoot){ /* XMLファイルからdata要素に記述されたデータを読み出すには、 DOM操作を行い要素の内容を読み込めばいいです。 */ var xmlData = xmlRoot.querySelectorAll("data"); var salesRoot = xmlData[0]; var salesData = salesRoot.querySelectorAll("sales"); var arrData= [ ]; for( var i=0 ; i < salesData.length ; i++){ /* querySelectorAll()を使いdata要素の sales要素、にアクセスしてデータセットに 値を代入していきます。 */ var d = salesData[i].firstChild.nodeValue; arrData.push( d ); } //棒グラフを描画する。 d3.select("#graphFruit") .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; }); }); |
ここから下はjsファイル上で読み込んでいるファイルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>果物販売数 サンプルデータ</title> </head> <body> <h2>例 果物販売数 </h2> <table> <tr> <th>りんご</th><th>みかん</th><th>なし</th> </tr> <tr> <td>80</td><td>55</td><td>30</td> </tr> <tr> <td>40</td><td>100</td><td>80</td> </tr> <tr> <td>100</td><td>40</td><td>120</td> </tr> <tr> <td>150</td><td>150</td><td>60</td> </tr> <tr> <td>280</td><td>255</td><td>130</td> </tr> </table> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8" ?> <datalist> <data> <item>りんご</item><sales>200</sales><sales>100</sales><sales>150</sales><sales>50</sales><sales>80</sales> </data> <data> <item>みかん</item><sales>20</sales><sales>190</sales><sales>90</sales><sales>40</sales><sales>280</sales> </data> <data> <item>なし</item><sales>60</sales><sales>120</sales><sales>130</sales><sales>220</sales><sales>20</sales> </data> <data> <item>もも</item><sales>70</sales><sales>20</sales><sales>50</sales><sales>80</sales><sales>30</sales> </data> <data> <item>ぶどう</item><sales>255</sales><sales>160</sales><sales>190</sales><sales>30</sales><sales>50</sales> </data> </datalist> |