D3：如何创建输入元素后跟标签文本？

Question

我有一个数组 var brands = ['Option1', 'Option2']。我想使用 D3 输出如下标记的单选按钮：

<label>
  <input type="radio" name="brand" value="Option1" checked="true"/> Option1
</label>
<label>
  <input type="radio" name="brand" value="Option2" /> Option2
</label>

这是我的 D3，但不太好用：

var radios = d3.select('.panel.left').selectAll('input[name="brand"]').data(brands);
var labels = radios.enter()
        .append("label")
        .attr("for", function(d) { return d; })
        .text(function(d) { return d; })
        .append("input")
        .attr("type", "radio")
        .attr("name", "brand")
        .attr("value", function(d) { return d; })
        .attr('checked', function(d) { if (d === brands[0]) { return 'checked' }; });
d3.selectAll('input[name="brand"]').on('change', function() {
  renderValues(this.value);
});

它非常接近工作，但它输出这个：

<label>
  Option1 <input type="radio" name="brand" value="Option1" checked="true" />
</label>
<label>
  Option2 <input type="radio" name="brand" value="Option2" />
</label>

无论我做什么，我都不知道如何将文本放在 <input> 元素之后。我应该怎么做？

如果我不必在最后重新select 输入元素来添加侦听器，那就太好了。

Answer 1

尝试在脚本末尾添加：

d3.selectAll("label")
    .data(brands)
    .append("text")
    .text(function(d) { return d; });

并删除这些行：

.attr("for", function(d) { return d; })
.text(function(d) { return d; })

您不需要重新select输入。在 .append("input") 之后添加监听器：

.append("input")
.on('change', function() {
  renderValues(this.value);
})

D3：如何创建输入元素后跟标签文本？

D3: how to create input elements followed by label text?

javascript

d3.js