JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div id="horse" />

JavaScript

var xStat = "A";

var choices = [{
    "Points": "PTS",
    "Goals": "G",
    "Assists": "A",
    "Penalty Minutes": "PIM"
}, {
     "Points2": "PTS",
    "Goals2": "G",
    "Assists2": "A",
    "Penalty Minutes": "PIM"
}]

choices.forEach(function(c){
  makeSelectUI('#horse', c, "A")  
})


function makeSelectUI(el, choices, selected){
  // create form skeleton
  var selectUI = d3.select(el)
    .append("form").append("select")

  // add option text
  selectUI
    .selectAll('option')
      .data(d3.keys(choices)).enter()
    .append('option')
    .text(function(d){ return d;})

  // add option values
  selectUI
    .selectAll('option')
      .data(d3.values(choices))
    .attr("value", function(d){ return d;})
}


/*
var selectUI = d3.select("#horse").append("form").append("select");

selectUI.selectAll("option").data(d3.keys(statOptions)).enter().append("option").text(function(d) {
    return d;
});

selectUI.selectAll("option").data(d3.values(statOptions)).attr("value", function(d) {
    return d;
});

    var checkOption = function (e) {
        if(e === xStat){
            return d3.select(this).attr("selected", "selected");
        }
    };
    
  //  selectUI.selectAll("option").each(checkOption);
  selectUI.property( "value", xStat );
*/