Динамически создавать переключатели с помощью d3 js

Question

Я знаю, как создавать переключатели, чтобы динамически отображаться без использования d3 js. Но как я могу создать текст меток переключателей с помощью d3? Также после создания, как добавить их к переключателю?

Answer 1

var shapeData = ["Triangle", "Circle", "Square", "Rectangle"], 
    j = 3; // Choose the rectangle as default 

// Create the shape selectors 
var form = d3.select("body").append("form"); 

labels = form.selectAll("label") 
    .data(shapeData) 
    .enter() 
    .append("label") 
    .text(function(d) {return d;}) 
    .insert("input") 
    .attr({ 
     type: "radio", 
     class: "shape", 
     name: "mode", 
     value: function(d, i) {return i;} 
    }) 
    .property("checked", function(d, i) {return i===j;}); 

SEE DEMO HERE

Answer 2

@ user140185, чтобы каждый на новой строке, добавьте:».append ("BR") * да, это должно быть комментарий, но я не хватает очков репутации