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

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

D3附加所需类型的输入

1 个答案: