I'd like to create several buttons in d3. in order to have a clearer code I'd like to add their names in an array.
I have the following code, but it doesn't work :
var buttonNames = ["button 1", "button 2", "button 3", "button 4"]
d3.select("body").selectAll("input").data(buttonNames).enter().append("input").attr("type","button").attr("class","button").attr("value", function d(){return d;} )
Thanks in advance for your reply.
This is how I create multiple buttons.
d3.select("#some_id")
.append("div")
.attr("class","some_other_id")
.each(function(d) {
for (var i = 1; i < number_to_duplicate; i++) {
d3.select("#some_other_id")
.append("button")
.attr("type","button")
.attr("class","btn-btn")
.attr("id",function(d) { return 'button '+i;})
.append("div")
.attr("class","label")
.text(function(d) { return 'button '+i;})
I create a div and an .each(function). In the function the for loop creates the buttons. This gives me as many buttons as I want - number_to_duplicate - each with individual id. Of course I can modify this an make more buttons, with equal or different attributes, appending those to a different yet_another_id element.
The labels could be done outside the loop elsewhere if desired. This is my poor man's 'button factory'. Please comment with critique, positive or negative - for me to learn from.
There's a typo in your function definition.
.attr("value", function d(){return d;} )
should be
.attr("value", function (d){return d;} )
Note that d is an argument to the function and has to be inside the parentheses.
