D3追加所需类型的输入

Question

首先考虑是多么容易填充一个下拉菜单，其中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; }); 

但是，我不太知道我怎么可以把一个HTML用户输入是尚未预先存在，并且也不需要通过data()呼叫“填充”。在我的情况下，我只是想为用户附加一个数字输入。我试过这个（和许多类似的变体）：

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

这没有奏效。所以，我再望望纯JavaScript解决方案，它看起来是这样的：

var newdiv = document.createElement('div'); 
    newdiv.innerHTML = "New Entry " + " <br><input type='number' name='myInputs[]'>"; 
    document.getElementById(divName).appendChild(newdiv); 

但是，我希望D3有一个稍微更优雅的解决方案。原因在于，随着我的项目进展，我的投入附加需求肯定会发展。在我的研究过程中，我还没有找到这方面的一个例子，所以我真的很想搞清楚D3的方法。

Answer 1

你可以直接用d3这样做。我添加了一个下拉菜单和一个数字html输入。

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; 
    }); 

检查小提琴这里 - https://jsfiddle.net/2k5j5xag/