javascript - d3.js 選択でデータ要素ごとに複数の隣接ノードを作成する方法

Question

次のようなデータを使用します。

var days = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"];

HTML構造を次のようにする必要があります。

<div>
  <input id="day0" type="checkbox">
  <label for="day0">Sun</label>

  <input id="day1" type="checkbox">
  <label for="day1">Mon</label>
  .... Etc

</div>

現在、私の現在の失敗した解決策は次のとおりです。

var selection = d3.select("div");
var enter    = selection.selectAll("input").data(days).enter()

enter.append("input")
     .attr("type","checkbox")
     .attr("id",function(d,i){ return "day"+i;})

enter.append("label")
     .attr("for",function(d,i){ return "day"+i;})
     .text(function(d,i){return daysAbbr[i];})

これは私に間違ったdomを与えます:

<div>
  <input id="day0" type="checkbox">
  <input id="day1" type="checkbox">
   .... Etc
  <label for="day0">Sun</label>
  <label for="day1">Mon</label>
  .... Etc
</div>

これらの隣接する兄弟をすべて作成するにはどうすればよいですか?