Error: Invalid value for <g> attribute transform=“translate(0,NaN)” in D3js when binding a graph.

[amustafa]

When trying to create a bunch of panels with d3js and then trying to fill those panels with graphs using "bindto" in C3js, if the data bound to the panels is a list of strings, you get the following error:

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

This is an example of the error: https://jsfiddle.net/tgp9gqfb/2/ Here is a reduced example with integers that does not throw the error: https://jsfiddle.net/sysvtm40/1 Here is a stackoverflow question I submitted for this issue which includes a workaround: http://stackoverflow.com/questions/34448108/c3js-and-d3js-error-invalid-value-for-g-attribute-transform-translate0-nan

[green-leaves]

+1 I have encountered the same issue

[jsncrdnl]

+1

[aendra-rininsland]

Sounds like a bug.

[Anawaz]

Any Update on this bug?

[panthony]

@Anawaz Do you?

Because I click on "this is an example of the error" with a working chart, nothing for 2 years on this issue, I'm inclined to close it.

[gkostov]

I does throw those errors for me in Chrome 80 when I open that fiddle and also opening the dev tools console. But as https://github.com/c3js/c3/issues/1739#issuecomment-247646418 points out, and in my specific case with a stacked bar chart, simply adding axis: { x: { type: 'category' } } to the config did the job. My chart wouldn't draw otherwise.

Cheers