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

Question

I'm trying to create a bunch of panels with d3js and then trying to fill those panels with graphs using C3js. For some reason, I keep getting:

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

When I hardcode the panels, it works just fine. Here is some example code that shows the error: https://jsfiddle.net/tgp9gqfb/2/

Any direction on what I'm doing wrong?

Answer 1

Instead of doing it with setting data and making divs:

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

Do the same with a for loop:

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

I agree the way you doing is correct but the internal c3 error is because of the data in the div that is the reason why i am asking you to do the same with the for loop.

Working code here

Hope this helps!