C3js and D3js Error: Invalid value for <g> attribute transform="translate(0,NaN)"

Question

我正在尝试使用 d3js 创建一堆面板，然后尝试使用 C3js 用图形填充这些面板。出于某种原因，我不断收到：

Error: Invalid value for <g> attribute transform="translate(0,NaN)"

当我对面板进行硬编码时，它工作得很好。下面是一些显示错误的示例代码：https://jsfiddle.net/tgp9gqfb/2/

我做错了什么方向？

Answer 1

而不是通过设置数据和制作 divs:

d3.select("#page-wrapper").selectAll("div")
            .data(order_labels["a"]);

用 for 循环做同样的事情：

  order_labels["a"].forEach(function(d) {
    new_panels = d3.select("#page-wrapper").append('div').attr('class', "panel panel-default");
    new_panels.append('div').attr('class', "panel-heading").text(function() {
      return readable_lables[d];
    });
    new_panels.append('div').attr('class', "panel-body").append('div').attr("id", function() {
      return d + "graph_wrapper";
    });
    new_panels.append('div').attr('class', "panel-footer");
  });

我同意你的做法是正确的，但内部 c3 错误是因为 div 中的数据，这就是我要求你对 for 循环执行相同操作的原因。

工作代码here

希望对您有所帮助！

C3js and D3js Error: Invalid value for <g> attribute transform="translate(0,NaN)"

C3js and D3js Error: Invalid value for <g> attribute transform="translate(0,NaN)"

javascript

d3.js

c3.js