【D3.js】データセットを元にセレクトボックスの項目を動的に生成する

小ネタです。

読み込んだデータセットを元にselect要素にoption要素を追加します。

var dataSet = [
  {label:"hoge", value:10},
  {label:"hello", value:20, selected:true},
  {label:"world", value:30},
  {label:"shimizu", value:40}
]

//option要素の生成
var optionElm = d3.select(".select")
  .selectAll("option")
  .data(dataSet)
  .enter()
  .append("option")
  .attr("value", function(d){ return d.value})
  .attr("selected", function(d){ if(d.selected) return "selected"})
  .text(function(d){ return d.label });

var dataSet = [

{label:"hoge", value:10},

{label:"hello", value:20, selected:true},

{label:"world", value:30},

{label:"shimizu", value:40}

]

//option要素の生成

var optionElm = d3.select(".select")

.selectAll("option")

.data(dataSet)

.enter()

.append("option")

.attr("value", function(d){ return d.value})

.attr("selected", function(d){ if(d.selected) return "selected"})

.text(function(d){ return d.label });

example

See the Pen d3.jsを使ってselect要素を生成 by shimizu masayuki (@shimizu) on CodePen.

D3を使うと簡単にシンプルに書くことができます。
D3.jsのデータを束縛してDOMを操作する機能は、グラフを描画する以外にも様々なことに利用できて楽しいのでいろいろ試してみてください。

example

投稿者: shimizu