d3.jsを使用して対話型視覚化を作成しています。視覚化の最上部には、bootstrapでスタイリングしているGUIがあります。 GUIのスタイルを.form-inline
として試していますが、チェックボックスのラベルは表示されず、.form-group
の間隔は機能しません。 d3で適切にレンダリングされないブートストラップ・フォーム・インライン
セレクタは、そのすべての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")
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; })
すべてが正しくレンダリングされなければならないように、それが見えます。私は何が欠けていますか?チェックボックスの問題については
が、私は思います(ブートストラップの例のように)チェックボックスの右側にあるラベルのように。間隔についてのあなたの推測については、それは何も解決しませんでした。 – Constantino