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?

Answer 1

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