JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="well" id="con"></div>
        </div>
    </div>
</div>

JavaScript

function selectGroup(el, x, callback){
   var btnGroup = d3.select(el)
     .append("select")
       .classed("form-control", true)
   
   var btns = btnGroup
     .selectAll("option")
     .data(x)
   
   btns.enter()
     .append("option")
       .attr("value", function(d){return d})
       .text(function(d){return d})
   
   btnGroup.on("change", function(){
      var d = this.value
      callback(d)
   })
}

function radioGroup(el, x, callback){
   var btnGroup = d3.select(el)

   var btns = btnGroup
     .selectAll("div")
     .data(x)

   var labels = btns.enter()
    .append("div")
      .attr("class", "radio")
    .append("label")
   
   labels.append("input")
     .attr("type", "radio")
     .attr("name", "options")
     .attr("value", function(d){return d})   
   
   labels.append("span")
     .text(function(d){return d})  
}

function btnGroup(el, x, callback){
  var btnGroup = d3.select(el).append("div")
    .classed('btn-group', true)
  
  var btns = btnGroup
    .selectAll("button")
    .data(x)
  
  btns.enter()
    .append('button')
      .classed('btn btn-default', true)
      .classed('active', function(d, i){
         return i === 0 ? true : false
       })
      .attr('data-value', function(d){return d})
      .text(function(d){return d})
      .on('click', function(d){
         d3.select(el).selectAll('.btn-group > .btn')
           .classed('active', false)
         d3.select(this).classed('active', true)
         callback(d)
       })
  return btns
}

selectGroup('#con', ['a', 'b', 'c'], function(x){
  console.log(x + x + x)
})