多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。