自动隐藏多个 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上看到它的样子。

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

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

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

抱歉我的英语不好，非常感谢您抽出宝贵的时间。

Answer 1

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

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

Answer 2

你现在已经可以正常工作了，但我也可以通过像这样替换一行来让它正常工作：

   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?

这包括清除事件处理程序和 'unofficial'（需要一个更好的术语）属性，例如 __data__ 字段 d3 填充和使用（它对于前 2 组条形是未定义的，因为这代码会显示）

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

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

Multiple C3.js charts automatically hidden, except the last one

javascript

d3.js

c3.js