javascript - 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 示例，因此我非常热​​衷于找出 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;
  });

在此处检查 Fiddle - https://jsfiddle.net/2k5j5xag/