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>元素之后。我应该做些什么？

如果我不必重新选择输入元素来添加一个监听器，那也很好。

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

您无需重新选择输入。在.append（“input”）之后添加监听器：

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

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

1 个答案: