javascript - D3 to Append Inputs of Desired Type -

first consider how easy populate drop down menu d3:

var options = [         "option 1",         "option 2",         "option 3",         "option 4"     ];     d3.select("#my_select")         .selectall("option")         .data(options)         .enter().append("option")         .attr("value", function(d) { return d; })         .text(function(d) { return d; }); 

however, i'm not quite sure how can append html user input not preexisting, , doesn't need 'populated' data() call. in case want append number input user. tried (and many similar variants):

graphgroup.append('input')     .attr('type','number'); 

that didn't work. looked @ pure javascript solution, looks this:

  var newdiv = document.createelement('div');   newdiv.innerhtml = "new entry " + " <br><input type='number' name='myinputs[]'>";   document.getelementbyid(divname).appendchild(newdiv); 

but, hope d3 has more elegant solution. reason being, input appending needs surely evolve progress project. during research, have not found d3 example of this, i'm keen on figuring out d3 approach.

you can directly d3 this. have added both dropdown , numberic html input.

var options = [   "option 1",   "option 2",   "option 3",   "option 4" ];  var select = d3.select("body")   .append("div")   .append("select");  var input = d3.select("body")     .append("div")   .append("input")     .attr("type", "number");  select   .on("change", function(d) {     var value = d3.select(this).property("value");     alert(value);   });  select.selectall("option")   .data(options)   .enter()   .append("option")   .attr("value", function(d) {     return d;   })   .text(function(d) {     return d;   }); 

check fiddle here - https://jsfiddle.net/2k5j5xag/