d3で適切にレンダリングされないブートストラップ・フォーム・インライン

Question

d3.jsを使用して対話型視覚化を作成しています。視覚化の最上部には、bootstrapでスタイリングしているGUIがあります。 GUIのスタイルを.form-inlineとして試していますが、チェックボックスのラベルは表示されず、.form-groupの間隔は機能しません。

セレクタは、そのすべてのdiv IDである私が使用しているチェックボックスのためにJSコード

（：コードレンダリング

：HTMLをレンダリング

レンダリング中）：

私が使用しているドロップダウンのために

var gui = d3.select(selector).append("div") 
    .attr("id", "gui") 
    .attr("class","form-inline") 

gui.append("div") 
    .attr("class","checkbox") 
    .append("label") 
    .append("input") 
    .attr("type","checkbox") 
    .attr("id","toggle_distance") 
    .attr("checked","") 
    .attr("onclick","guiUpdate(this)") 
    .text(" Toggle distance labels") 

：bootstrap form examplesを見て

var leafSelect = gui.append("div") 
    .attr("class","form-group") 
    .append("select") 
    .attr('onchange','guiUpdate(this)') 
    .attr('id','leafColor') 
    .attr("class","form-control") 

leafSelect.selectAll("option") 
    .data(mapParse.keys()).enter() 
    .append("option") 
    .text(function(d) { return d; }) 

すべてが正しくレンダリングされなければならないように、それが見えます。私は何が欠けていますか？チェックボックスの問題については

Answer 1

私は次のようにチェックボックスのラベルの問題を解決しています：

var gui = d3.select(selector).append("div") 
    .attr("id", "gui") 
    .attr("class","form-inline") 

var check1 = gui.append("div") 
    .attr("class","checkbox") 
    .append("label") 

check1.append("input") 
    .attr("type","checkbox") 
    .attr("id","toggle_distance") 
    .attr("checked","") 
    .attr("onclick","guiUpdate(this)") 

check1.append('text') 
    .text("Toggle distance labels") 

アライメントの問題を、私は残念ながら、いくつかのCSSを所定の場所にパッチを適用しています：チェックボックスソリューションが動作する

.form-inline text, .form-inline label { 
    margin: 0px 3px 0px 3px !important; 
} 

Answer 2

：input外とlabel内のテキストを移動：

gui.append("div") 
    .attr("class","checkbox") 
    .append("label") 
    .text(" Toggle distance labels") 
    .append("input") 
    .attr("type","checkbox") 
    .attr("id","toggle_distance") 
    .attr("checked","") 
    .attr("onclick","guiUpdate(this)") 

を今、間隔の問題のために、これは推測です：代わりにdivのformを追加します。

var gui = d3.select(selector).append("form") 
    .attr("id", "gui") 
    .attr("class","form-inline") 

を

あなたのような内部部門は次のようにしました：

var leafSelect = gui.append("div") 
    .attr("class","form-group") 
    .append("select") 
    .attr('onchange','guiUpdate(this)') 
    .attr('id','leafColor') 
    .attr("class","form-control")