D3 create buttons from an array of string containing names

Question

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.

score 5 · Accepted Answer · answered Mar 06 '13 at 10:12

5

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.

answered Mar 06 '13 at 10:12

Lars Kotthoff

107,425
16
204
204

score 5 · Answer 2 · answered Jul 07 '15 at 20:03

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.

D3 create buttons from an array of string containing names

2 Answers2