D3 pie chart: Uncaught Type Error - Cannot read property 'pie' of undefined

Question

I am attempting to create a d3 pie chart based off of this resource.

However, I get the following error:

Uncaught Type Error - Cannot read property 'pie' of undefined

My code:

class PieChart extends React.Component {
constructor() {
    super();

// - This is where the error is occuring!

    this.pie = d3.layout.pie().value((d) => d.value);
    this.colors = d3.scale.category10();

}

arcGenerator(d, i) {
    return (
        <LabeledArc key = {`arc-${i}`}
                    data = {d}
                    innerRadius = {this.props.innerRadius}
                    outerRadius = { this.props.outerRadius }
                    color = {this.colors(i)} />
    );

}

render() {

    console.log('Render Method Fires');
    let pie = this.pie(this.props.data),
        translate = `translate(${this.props.x}, ${this.props.y})`;

    return (
             <g transform={translate}>
                {pie.map((d, i) => this.arcGenerator(d, i))}

            </g>
        );

    }
}

I think I have everything setup correctly. Im using react-rails gem as well as the d3-rails. I had to download the d3.js and put it directly in my js folder to get rid of the 'cannot find d3'.

Can anyone point me in the right direction, maybe you have a better resource for adding d3 + react functionality in rails?

What version of D3? If you are using v4 this has been [renamed](https://github.com/d3/d3/blob/master/CHANGES.md#shapes-d3-shape) as follows: d3.layout.pie ↦ [d3.pie](https://github.com/d3/d3-shape#pies). — altocumulus, Nov 01 '16 at 10:33
@altocumulus this actually worked perfectly. I didnt think to check the differing versions, thanks for saving me a huge headache :) — mGarsteck, Nov 01 '16 at 10:46
Please have a thorough look at the [changelog](https://github.com/d3/d3/blob/master/CHANGES.md)! The next problem your are going to run into is on the next line involving `d3.scale.category10()`. Please have a look at my answer for more information. — altocumulus, Nov 01 '16 at 10:48
@altocumulus you are correct, and I was able to fix them by checking out the changelog. Ive gone and fixed the errors but the graph is still not showing up, just the legend :/ — mGarsteck, Nov 01 '16 at 11:08
To avoid cluttering this question with any follow-up issues, please set up a [mcve], check your console for errors and, if still necessary, post a new question providing all this information. — altocumulus, Nov 01 '16 at 11:11
Im going to work on it by myself until I exhaust what I can figure out. Thanks for the answer! :) — mGarsteck, Nov 01 '16 at 11:15

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

Like seen in many similar questions before this is to be attributed to the new modularity of D3 v4, which made it necessary to flatten namespaces:

However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x.

For your code this means that some references are invalid because they refer to properties which are no longer available in v4. The snippet you included contains two of such cases:

Shapes

d3.layout.pie ↦ d3.pie

and on the next line of your code

Scales

d3.scale.category10 ↦ d3.schemeCategory10

D3 pie chart: Uncaught Type Error - Cannot read property 'pie' of undefined

1 Answers1

Shapes

Scales