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?

Bred

pie and colors are not defined as global variable – Journal

What version of D3? If you are using v4 this has been renamed as follows: d3.layout.pie ↦ d3.pie. – Hydrastinine

@Hydrastinine this actually worked perfectly. I didnt think to check the differing versions, thanks for saving me a huge headache :) – Bred

Please have a thorough look at the changelog! 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. – Hydrastinine

@Hydrastinine 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 :/ – Bred

To avoid cluttering this question with any follow-up issues, please set up a minimal reproducible example, check your console for errors and, if still necessary, post a new question providing all this information. – Hydrastinine

Im going to work on it by myself until I exhaust what I can figure out. Thanks for the answer! :) – Bred

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

Hydrastinine