JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="col-md-2">
    <div id="test"></div><br/>
    <div id="test2"></div>
</div>

JavaScript

function makeBtnGroup(){
    function foo(){
       var btnGroup = d3.select('#test2')
         .append("div")
         .attr("class", "btn btn-group")
       
       var btns = btnGroup
         .selectAll("button")
         .data(foo.data()).enter()
   
       btns.append("button")
         .attr("class", foo.btnclass())
         .attr("data-value", function(d){
             return d[foo.val()]
         })
         .text(function(d){return d[foo.text()]})
         .on("click", function(d){
           var x_ = d3.select(this).attr('data-value')
           console.log(x_)
         })
       
    }
    foo.btnclass = function(value) {
      if (!arguments.length) return btnclass;
      btnclass = value;
      return foo;
    };
    
    foo.data = function(value){
       if(!arguments.length) return data; 
       data = value;
       return foo
    };
                                    
    foo.text = function(value){
       if(!arguments.length) return text; 
       text = value;
       return foo
    };  
                                    
    foo.val = function(value){
       if(!arguments.length) return val; 
       val = value;
       return foo
    };
                                    
    
    return foo
}

makeBtnGroup('#test2')
  .data([
    {value: 1, text: "One"}, 
    {value: 2, text: "Two"}
   ])
  .val("value")
  .text("text")
  .btnclass("btn btn-info btn-md")
  .call()
 

/*
function btnDropDown(el, x){
   var btnGroup = d3.select(el)
     .append("div")
       .attr("class", "btn-group btn-group-sm")
   
   var btns1 = btnGroup
     .append("button")
       .attr("class", "btn btn-default active btn-success")
       .text("Overall Stats")
   
   var btns2 = btnGroup
     .append("button")
       .attr("class", "btn btn-default dropdown-toggle")
       .attr("data-toggle", "dropdown")
   
   btns2
     .append("span").classed("caret", true)
   
   btns2
     .append("span").classed("sr-only", true)
     .text("Toggle Dropdown")
   
   var menu...