使用d3

Question

我正在尝试使用d3和Bootstrap select插件添加下拉菜单。这是一段代码：

<div class="row">
 <div class="col-xs-3" id="test">
  <div class="form-group">
   <select class="selectpicker form-control" id = "opts" >
     <option value="ds1">data1</option>
     <option value="ds2">data2</option> 
     <option value="ds3">data3</option>
   </select> 
 </div>
</div>
</div>

在这种情况下，我按需要获得一个下拉菜单。我现在想用d3编程，使用以下代码：

selectGroup = d3.select("body")
                       .append("div").attr("class","row")
                       .append("div").attr("class","col-xs-3")
                       .append("div").attr("class", "form-group")
                       .append("select").attr("class", "selectpicker form-control");
    selectGroup.append("option").attr("value","key1").text("data1");
    selectGroup.append("option").attr("value","key2").text("data2");

这样做时，我在屏幕上看不到任何内容。在Chrome Elements中，我可以看到这已添加到DOM中，但尺寸为...... x0，就好像它没有高度一样。

知道为什么会这样，以及如何克服这个问题？非常感谢所有人的帮助！