多C3.js图表​​自动隐藏，除了最后一个

Question

我想生成多个C3图表用下面的代码：

var datas=[[ 
    ["name", "position", "y", "bigRect", "myBars"], 
    ["One 22", 2, 2, 2, 2], 
    ["One 33", 3, 3, 2, 2], 
    ["One 44", 4, 4, 2, 2] 
],[ 
    ["name", "position", "y", "bigRect", "myBars"], 
    ["Two 55", 5, 5, 2, 2], 
    ["Two 66", 6, 6, 2, 2], 
    ["Two 77", 7, 7, 2, 2] 
],[ 
    ["name", "position", "y", "bigRect", "myBars"], 
    ["Three 88", 8, 8, 2, 2], 
    ["Three 99", 9, 9, 2, 2], 
    ["Three 00", 0, 0, 2, 2] 
]]; 

var iData = 0; 
var charts = []; 

for(iData in datas){ 

    var d = datas[iData]; 
    document.querySelector(".container").innerHTML += "<div id='chart"+iData+"'></div>"; 
    var chartSelector = "#chart"+iData; 

    charts[iData] = c3.generate({ 
     bindto: d3.select(chartSelector), 
     data: { 
      rows: d, 
      type: "scatter", 
      types: { 
       bigRect: "area", 
       myBars: "bar" 
      }, 
      x: "position", 
      y: "y" 
     }, 
     zoom: { 
      enabled: true 
     } 
    }); 

} 

所有的图表看空除了最后一个完美的作品。 您可以在this JSbin link上看到它的外观。

在隐藏的图表，生成所有SVGs，但

• 包含path绘制点和酒吧都设置opacity: 0，隐藏自己的所有内容g SVG元素。
• 变焦和工具提示不工作，要么

你知道为什么C3是禁用第一图表，以及如何使他们？

我很抱歉我的可怜的英语，非常感谢你的时间。

Answer 1

你明白了现在的工作，但我也可以把它更换一条线，像这样的工作：

d3.select(".container").append("div").attr("id", "chart"+iData); 
    //document.querySelector(".container").innerHTML += "<div id='chart"+iData+"'></div>"; 

这似乎增加的东西，然后更换.innerHtml有副作用的现有内容在你的情况下，第一图表构建

Is it possible to append to innerHTML without destroying descendants' event listeners?

这包括消灭事件处理程序和“非官方”（对于一个更好的词想）属性像__data__场D3填充和我们es（对于前面的2套钢筋没有定义，因为此代码会显示）

for(iData in datas){ 
    console.log (d3.select("#chart"+iData+" .c3-bars").node().__data__); 
    } 

Answer 2

我终于通过在调用c3之前在另一个循环中创建所有的#chartX容器来解决了我的问题。

我认为它与JS的非过程执行顺序有关，但我仍然在寻找对这种现象的精确解释。 这是link to the corrected JSbin。