D3從包含名稱的字符串數組中創建按鈕

Question

我想在d3中創建幾個按鈕。爲了有一個更清晰的代碼，我想在數組中添加他們的名字。

我有下面的代碼，但它不工作：

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;}) 

預先感謝您的回覆。

Answer 1

您的函數定義中存在拼寫錯誤。

.attr("value", function d(){return d;}) 

應該

.attr("value", function (d){return d;}) 

注意d一種說法的功能和必須的括號內。

Answer 2

這是我如何創建多個按鈕。

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;}) 

我創建了一個div和一個.each（函數）。在函數中，for循環創建按鈕。 這給了我儘可能多的按鈕 - number_to_duplicate - 每個都帶有個人ID。 當然，我可以修改它，使更多的按鈕，具有相同或不同的屬性，將它們附加到不同的yet_another_id元素。

如果需要，標籤可以在循環外部完成。 這是我可憐的'鈕釦工廠'。請評論批評，積極或消極 - 我可以學習。