D3.jsを利用してセレクトボックスのオプションを配列から取得

今回は、セレクトボックスの選択肢を任意の配列の情報から取得する方法を紹介します。このやり方を覚えておくと、データをインタラクティブに可視化する際に便利かもしれません。

HTML: セレクトボックスの設定

セレクトボックスにidをつけておくと後でd3.jsのセレクションを利用できます。
この段階ではoptionタグは設定しません。

<form>
<table>
<tr>
<td>選択肢</td><td><select id = "select_id"></select></td>
</tr>
</table>
</form>

JavaScript

配列の読み込みと配列情報を選択肢として割り当てるという2工程です。

配列の読み込み

今回は次のような配列を考えます。

var arr = new Object({変数１: 0, 変数２: 1, 変数３: 3});

タブ区切りのテキストファイルを用いることも可能です。

var arr = new Object();
d3.tsv("arr.txt",function(error, dat){
  arr = dat[0];
});

セレクトボックスの選択肢に配列のキーを割り当て

オブジェクトのキーはd3.keys()で簡単に取得できます。

var option  = d3.select("select_id").selectAll("option").data(d3.keys(arr)).enter().append("option");

option.attr("value", function(d){return d;}).append("text").text(functrion(d){return d;});