CODEWITHSUNDEEP
javascriptd3.jsradio-button
user140185
user140185

Reputation: 31

Dynamically create radio buttons using d3 js

I know how to create the radio buttons to appear dynamically without using d3 js. But how can I create the label text of the radio buttons using d3? Also after creating, how to add them to the radio button?

Upvotes: 1

Views: 4463

Answers (1)

Roshan
Roshan

Reputation: 2194

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

Upvotes: 4

Related Questions