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?

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?

• javascript
• ruby-on-rails
• reactjs
• d3.js
• react-rails

• pie and colors are not defined as global variable – Kevin Kloet Commented Nov 1, 2016 at 10:33
• 5 What version of D3? If you are using v4 this has been renamed as follows: d3.layout.pie ↦ d3.pie. – altocumulus Commented Nov 1, 2016 at 10:33
• @altocumulus this actually worked perfectly. I didnt think to check the differing versions, thanks for saving me a huge headache :) – mGarsteck Commented Nov 1, 2016 at 10:46
• 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. – altocumulus Commented Nov 1, 2016 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 Commented Nov 1, 2016 at 11:08

1 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