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

我正在尝试使用以下代码生成多个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
        }
    });

}

var数据=[[
[“名称”、“位置”、“y”、“bigRect”、“myBars”]，
[“一个22”、2、2、2、2]，
[“一个33”、3、3、2、2]，
[“一个44”，4，4，2，2]
],[
[“名称”、“位置”、“y”、“bigRect”、“myBars”]，
[“两个55”、5、5、2、2]，
[“两个66”、6、6、2、2]，
[“两个77”，7，7，2，2]
],[
[“名称”、“位置”、“y”、“bigRect”、“myBars”]，
[“三个88”、8、8、2、2]，
[“三个99”、9、9、2、2]，
[“三个00”，0，0，2，2]
]];
var-iData=0；
var图表=[]；
for（数据中的iData）{
var d=数据[iData]；
document.querySelector（“.container”）.innerHTML+=”；
var chartSelector=“#chart”+iData；
图表[iData]=c3.0({
绑定到：d3.选择（图表选择器），
数据：{
行：d，
键入：“散布”，
类型：{
bigRect：“区域”，
我的酒吧：“酒吧”
},
x:“职位”，
y：“y”
},
缩放：{
已启用：true
}
});
}

所有的图表都是空的，除了最后一个运行良好的图表您可以在屏幕上看到它的外观。

在隐藏图表上，生成所有SVG，但

• 包含绘制点和条的

  路径的
  g
  SVG元素设置为
  opacity:0
  ，隐藏其所有内容

• 缩放和工具提示也不起作用

您知道c3为什么要禁用第一个图表以及如何启用它们吗

---

我为我糟糕的英语道歉，非常感谢你抽出时间。

在调用

c3

之前，我在另一个循环中创建了所有

#chartX

容器，最终解决了我的问题

我认为这与JS的非程序执行顺序有关，但我仍在寻找对这一现象的精确解释。

---

这是。

您现在可以使用它了，但我也可以通过如下方式替换一行来使用它：

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

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