複数C3.jsチャート、最後の1

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

} 

すべてのチャートは完璧に動作し、最後の1以外の空に見えます。 this JSbin linkにどのように見えるかを見ることができます。隠されたチャート上

、すべてSVGsが生成されますが、ドットやバーを描画pathが含まれている

• g SVG要素はすべて、その内容を隠し、opacity: 0に設定されています。
• ズームとツールチップが

いずれも動作しないC3は最初のグラフを無効にし、それらをどのように有効にすることですなぜあなたは知っていますか？

私の貧しい人々のための私の謝罪とあなたの時間のために非常にありがとう。

Answer 1

あなたはそれが今働いて、私もそれはそうのような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を移入し、私たちのよう属性このコードが明らかになるので、最初の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です。