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，但

包含g的{{1}} SVG元素在path上设置了点和条，隐藏了所有内容。
缩放和工具提示不起作用

你知道为什么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填充和使用（它的前两组条形图未定义，因为此代码将显示）

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

Answer 2

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

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

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

2 个答案:

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

2 个答案:

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