yang-wei / rd3

react + d3
https://yang-wei.github.io/rd3/
MIT License
319 stars 83 forks source link

LineChart incorrect accessors throws: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN". #65

Closed jdelafon closed 8 years ago

jdelafon commented 8 years ago

I get this when the accessors are not correct, e.g. when data.values is given as {key: 1, val: 3} instead of {x: 1, y: 3} with the default accessors:

LineChart: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

The error message could be improved (it took me about 15 min to figure it out).

yang-wei commented 8 years ago

probably duplicated of https://github.com/yang-wei/rd3/issues/61

jdelafon commented 8 years ago

I'd rather keep this one open to fix the error message and close #61 instead, since the former has a concrete example and the latter I couldn't reproduce.

yang-wei commented 8 years ago

https://github.com/yang-wei/rd3/blob/master/src/linechart/DataSeries.jsx#L25

From the default accesor in LineChart, you can see we expect your data to have x and y as the key

  getDefaultProps() {
    return {
      data: [],
      xAccessor: (d) => d.x,
      yAccessor: (d) => d.y,
      interpolationType: 'linear',
      hoverAnimation: false,
    };
  },

If you have different value, the you have to use your own accessor:

<LineChart
  ...
  xAccessor={d => d.key}
  yAccessor={d => d.val}
/>

This should solve your problem.

jdelafon commented 8 years ago

The problem is not the wrong accessors, but that when you use a wrong accessor, with such an error message you can search for its origin for an hour. The error message should be improved.