mGarsteck mGarsteck - 1 year ago 288
React JSX Question

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

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() {

// - 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(,
translate = `translate(${this.props.x}, ${this.props.y})`;

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



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 Source

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:


and on the next line of your code


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download