D3 Bootstrap Inputs

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
   <div class="col-xs-6" id="test2">
   </div>
   <br/><br/>
   <div id="test"></div> 
   <br/><br/>
   
   
    <div>
   <ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisisin</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
        </div>
</div>

CoffeeScript

data = [
  {value: "dashboard", text: "Dashboard"},
  {value: "inbox", text: "Inbox"},
  {value: "account", text: "Account"},
  {value: "logout", text: "Logout"}
]


    
d3selectinput = ->
  event_handlers = {}
  exports = (selection) ->
    selection.each (data) ->
      e = d3.select(this)
      select = e.append("select")
        .classed("form-control", true) 
      options = select.selectAll("option")
        .data(data).enter()
        .append("option")
        .attr("value", (d) -> d.value)
        .text((d) -> d.text)
      for event of event_handlers
        select.on event, event_handlers[event]
  exports.on = (event, fun) ->
    if arguments.length == 1
      return event_handlers[event]
    event_handlers[event] = fun
    exports
  exports
 
s = d3selectinput()
  .on("change", (d) -> console.log @value)
d3.select("#test2")
  .data([data])
  .call(s)

d3buttongroup = ->
  event_handlers = {}
  exports = (selection) ->
    selection.each (data) ->
      e = d3.select(this)
      bg = e.append('div')
        .classed("btn-group", true)
      btns = bg.selectAll("button")
        .data(data).enter()
        .append("button")
          .attr("href", "#")
          .classed("btn btn-default btn-sm", true)
          .classed("active", (d, i) -> i is 0)
          .text((d) -> d.text) 
      for event of event_handlers
        btns.on event, event_handlers[event]
  exports.on = (event, fun) ->
    if arguments.length == 1
      return event_handlers[event]
    event_handlers[event] = fun
    exports
  exports

btngroup = d3buttongroup()
  .on "click", (d, i) -> 
    alert d.value
d3.select("#test")
  .datum(data)
  .call(btngroup)