search

esbullington / react-d3

Modular React charts made with d3.js
https://reactiva.github.io/react-d3-website/
MIT License
1.75k stars 179 forks source link

Array Values causing issues #111

Closed jmuel closed 9 years ago

jmuel commented 9 years ago

The code I'm referencing is in utils/index.js.

data.forEach( (series) => { series.values.forEach( (item, idx) => {

series.values appears to be an es6 addition to Array. When I build charts that use it in the docs it works fine but my personal project gives an error on this saying that series.values is null. This was changed in commit (32c5b7)[https://github.com/esbullington/react-d3/commit/32c5b716939cfbda53f3e49b14f79fc816826e65] and it looked like it was mostly a convenience change.

I would have assumed this would be compiled away by the es6 transpiler but it doesn't appear that this is happening in this case.

esbullington commented 9 years ago

I didn't have es6 in the watchify command. I'm about to push out a fix right now. Can you check if that works for you?

esbullington commented 9 years ago

By the way, not sure if your issue was formatted properly, but if you're asking about series.values, it's just a regular JS object series with a values key pointing to an array of data points. It's the project's standardized data format now, as inspired by the Vega visualization grammar.

jmuel commented 9 years ago

I see the issue. I was still looking at (the documentation)[http://esbullington.github.io/react-d3/] which shows the data like this: var lineData = { series1: [ { x: 0, y: 20 }, ... , { x: 6, y: 10 } ], series2: [ { x: 0, y: 8 }, ..., { x: 6, y: 2 } ], series3: [ { x: 0, y: 0 }, ..., { x: 6, y: 2 } ] };

when it should actually be like this:

var lineData = [ { name: 'series1', values: [ { x: 0, y: 20 },... { x: 6, y: 10 } ] }, { name: 'series2', values : [ { x: 0, y: 8 },... { x: 6, y: 2 } ] }, { name: 'series3', values: [ { x: 0, y: 0 }, ... { x: 6, y: 2 } ] } ];

looking at the Vega documentation made it obvious. I'll go ahead and update the docs to clear that up.

rrag commented 9 years ago

How did you get to that link? the readme is updated and the documentation is now at

http://esbullington.github.io/react-d3-website/

may be there is a link to the old documentation from somewhere which needs to be fixed.

jmuel commented 9 years ago

It's in the main Readme.md. Under "Basic Usage".

esbullington commented 9 years ago

Thanks, if you want to send in a PR with an updated link in the README, that would be great. I'm off to bed now, so I'll merge it in the morning.

The only other place I know of that's still linked to the old site is the NPM page, but that will change as soon as I publish the next release with the updated package.json, which already has the new site listed.

esbullington commented 9 years ago

Thanks, @jmuel I'm closing this since your PR fixed it, if I'm not mistaken. Please feel free to open another issue if I'm wrong.