react-d3 / react-d3-basic

Basic d3 charts in React.js, only include: line, bar, pie, scatter, area charts.
http://reactd3.org/docs/basic
221 stars 117 forks source link

xScale throwing error while passing ordinal #38

Open neolivz opened 8 years ago

neolivz commented 8 years ago

If xScale="ordinal" is throwing error Failed prop type: Invalid prop xScale of value band supplied to Grid, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"].

This is due to bug in react core https://github.com/react-d3/react-d3-core/issues/36 which is fixed in version 1.3.1

strobox commented 8 years ago

Met this issue with react-d3-core 1.3.9

helsont commented 7 years ago

What's the deal with this: https://github.com/react-d3/react-d3-shape/blob/master/src/chart.jsx#L71 .

Trying to run the BarChart example and im getting this:

Warning: Failed prop type: Invalid prop `xScale` of value `band` supplied to `Grid`, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"].

Pretty sure that the line I selected says why the prop type is invalid.

import React from 'react';

import {
  BarChart
} from 'react-d3-basic';

import d3 from 'd3';
import moment from 'moment';

import {
  tsvParse
} from 'd3-dsv';

const letterData = `letter  frequency
A   .08167
B   .01492
C   .02782
D   .04253
E   .12702
F   .02288
G   .02015
H   .06094
I   .06966
J   .00153
K   .00772
L   .04025
M   .02406
N   .06749
O   .07507
P   .01929
Q   .00095
R   .05987
S   .06327
T   .09056
U   .02758
V   .00978
W   .02360
X   .00150
Y   .01974
Z   .00074`;

class LeadSources extends React.Component {
  constructor(props) {
    super(props);
  }
  renderBarGraph() {
    let generalChartData = tsvParse(letterData);

    let width = 960,
      height = 500,
      title = 'Bar Chart',
      chartSeries = [
        {
          field: 'frequency',
          name: 'Frequency'
        }
      ],
      x = function (d) {
        return d.letter;
      },
      xScale = 'ordinal',
      xLabel = 'Letter',
      yLabel = 'Frequency',
      yTicks = [10, '%'];

    return (<BarChart
      title= {title}
      data= {generalChartData}
      width= {width}
      height= {height}
      chartSeries = {chartSeries}
      x= {x}
      xLabel= {xLabel}
      xScale= {xScale}
      yTicks= {yTicks}
      yLabel = {yLabel}
    />);
  }
  render() {
    return this.renderBarGraph();
  }
}

export default LeadSources;
crobinson42 commented 7 years ago

I'm still experiencing this issue - any help or direction on this?