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>. Что я должен делать по-другому?

Было бы неплохо, если бы мне не пришлось повторно выбирать элементы ввода, чтобы добавить слушателя в конце.

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 ("ввод") добавить слушателя:

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