Javascript 理解d3.js中动态创建的多个按钮中的可重用代码

我的应用程序有多个动态创建的页面，每个页面标题中都有一个动态创建的按钮列表。因此，我尝试使用可重用代码

我阅读了这些相关文章（和），搜索了d3.js的“克隆”以及stackoverflow帖子

到目前为止，我的解决方案似乎是灵活和有用的。例如：

d3.select("#select-viewer").append("div")
  .attr("id","btn-group-select-view").call(function(d,i) {

    for (var i = 1; i < 16; i++) {
        d3.select("#btn-group-select-view")
          .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;})
    }

    for (var i = 16; i < 30; i++) {
        d3.select("#btn-group-select-view2")
          .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;})
    }
});

并将其附加到元素

 d3.selectAll("div").call(button(classname,id,text));

或者（这里还不确定代码的语法）：

d3.选择（“div”）.调用（函数（d，i）{
对于（变量i=1；i<16；i++）{
按钮（类名、id、文本）
}
});

---

在我将其应用于更大范围之前，我希望得到您的反馈。

我将使用通常的D3数据绑定模式，而不是循环，即使用代表按钮的数据。如果您发现有时间，Lars-为什么您更喜欢这样？谢谢。因为它使用D3的方式来做事情，这是D3中实现的可重用组件所使用的方法。谢谢，我理解。这对我来说很有趣，因为使用D3方式，你必须定义数据（例如文档中的部分）并让数据创建按钮，我觉得这是一个非常有趣的概念，而且总是令人惊讶；它们被动态地分割成15个独立的块1000-d3.csv->data.splice（01000）。我的按钮正在选择这些部分。也就是说：可以绑定到按钮元素的数据实际上还不存在。我知道我需要15个按钮。现在我必须弄清楚如何将拼接操作“转换”为如下代码：按钮的数据=总数据行除以千。这似乎比使用“for”语句更复杂，不是吗。

 d3.selectAll("div").call(button(classname,id,text));

 d3.select("div") .call(function(d,i){
    for (var i = 1; i < 16; i++) {
      button(classname,id,text)
 }
});