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

【问题标题】：Multiple C3.js charts automatically hidden, except the last one多个 C3.js 图表自动隐藏，除了最后一个
【发布时间】：2016-08-22 12:20:40
【问题描述】：

我正在尝试使用以下代码生成多个 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 上查看它的外观。

在隐藏图表上，所有的 SVG 都生成了，但是

包含path 绘制点和条的g SVG 元素设置在opacity: 0 上，隐藏其所有内容。
缩放和工具提示也不起作用

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

对于我糟糕的英语深表歉意，非常感谢您抽出宝贵的时间。

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案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（前两组条形图未定义，此代码将显示）

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

【讨论】：

【解决方案2】：

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

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

【讨论】：