Error: Invalid value for <g> attribute transform=“translate(0,NaN)” in D3js when binding a graph.
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
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 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
Contributor guide
Research direction
Start with the reduced integer example and the failing string-data example in the linked JSFiddle pages, then trace the C3.js `bindto` entry point while comparing how each dataset is handled. Done means binding string data to multiple panels no longer produces a D3.js `translate(0,NaN)` error, without regressing the integer case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3js, javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100