使用 d3 附加复选框时添加标签时遇到问题

好的，我一直在尝试根据数据集中的列数动态地将一些复选框附加到 div 中。所以我认为 d3 是可行的方法，只需在输入中附加适当的属性和根据数据确定的标签的一些文本即可。我尝试过以下代码；

d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter().append("input")
.attr("checked", true)
.attr("type", "checkbox")
.attr("id", function(d,i) { return i; })
.attr("onClick", "change(this)")
.attr("for", function(d,i) { return i; })
.text(function(d) { return d; });

这会导致页面上有 4 个复选框，但没有标签。

真正奇怪的是，当我检查元素时，生成的 html 似乎就是我想要的，如下所示。

<input checked="true" type="checkbox" id="0" onclick="change(this)" for="0">11</input>
<input checked="true" type="checkbox" id="1" onclick="change(this)" for="1">22</input>
<input checked="true" type="checkbox" id="2" onclick="change(this)" for="2">33</input>
<input checked="true" type="checkbox" id="3" onclick="change(this)" for="3">44</input>

当我在页面上使用它时，我得到了我想要的东西。

我确信我错过了一些非常简单的东西，但我一生都看不出它是什么。任何帮助感激不尽！

你的主要问题是你不能在两者之间放置文本<input>像这样的标签。它们是自动关闭的<input />。您应该使用<label>该文本的元素。

另一个问题是 IDmust以字母开头（至少在 HTML5 之前），所以id="1"行不通，但是id=a1" will.

也就是说，这段代码解决了这两个问题

d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter()
.append('label')
    .attr('for',function(d,i){ return 'a'+i; })
    .text(function(d) { return d; })
.append("input")
    .attr("checked", true)
    .attr("type", "checkbox")
    .attr("id", function(d,i) { return 'a'+i; })
    .attr("onClick", "change(this)");