c3js / c3js/c3

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

Open
#1,517 6 comments 2 reactions 0 assignees View on GitHub
C-bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.