Question

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

我已阅读这些相关文章（Exploring Reusability with D3.js和Towards Reusable Charts）并搜索了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;})
    }
});

创建此功能会有所改进吗？

function button(selection,classname,id,text) {
  selection
          .append("button")
          .attr("type","button")
          .attr("class",classname)
          .attr("id",id)
          .append("div")
          .attr("class","label")
          .text(text)
}

并将其附加到元素？

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

在我更大规模地申请之前，我希望得到您的反馈。

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

0 个答案: