React component function cannot call another function

Question

I'm trying to use d3.js inside of a React app.

this.animateFirstStep gets called fine in componentDidMount but inside animateFirstStep, this.animateSecondStep never gets called.

import React, { Component, PropTypes } from 'react';

var d3 = require("d3");

export default class App extends Component {

    constructor() {
        super();
        this.state = {};
    }

    animateFirstStep() {
        d3.select(this)
            .transition()
            .delay(0)
            .duration(1000)
            .attr("r", 10)

this one does not get called

            .on("end", this.animateSecondStep);
    }

    animateSecondStep() {
        console.log("hello");
        d3.select(this)
            .transition()
            .duration(1000)
            .attr("r", 40);
    }

    componentDidMount() {
        this.sampleSVG = d3.select(".d3")
            .append("svg")
            .attr("width", 100)
            .attr("height", 100);

        this.sampleSVG.append("circle")
            .style("stroke", "gray")
            .style("fill", "white")
            .attr("r", 40)
            .attr("cx", 50)
            .attr("cy", 50)
            .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
            .on("mouseout", function(){d3.select(this).style("fill", "white");})

this gets called fine

            .on("mousedown", this.animateFirstStep);
    }

    render() {
        return (<div className="d3"></div>);
    }
}

Can you try to add this.animateFirstStep = this.animateFirstStep.bind(this) ; this.animateSecondStep = this.animateSecondStep.bind(this) in constructor and try again? Not sure if that is the case, but you are referring 'this' in that function. — MattYao
– MattYao, Commented Mar 17, 2017 at 2:35
Open the chrome inspector, go to the "sources" tab, click "pause on exceptions", and check "pause on caught exceptions" — Andy Ray
– Andy Ray, Commented Mar 17, 2017 at 2:36
@MattYao tried it and i get this error Uncaught TypeError: this.getAttribute is not a function at App.<anonymous> (bundle.js:40083) at App.tween (bundle.js:40150) at start (bundle.js:39918) at schedule (bundle.js:39859) at timerFlush (bundle.js:39724) at wake (bundle.js:39734) — HaseebR7
– HaseebR7, Commented Mar 17, 2017 at 2:45
I haven't used d3 with React yet and can't do much help. Have you tried react-d3? I think it works better with React: (github.com/esbullington/react-d3/tree/master/src). Also, I suggest you change var d3 = require('d3') to import d3 from 'd3'; Because you are using ES6 here so you should use 'let' instead of 'var' — MattYao
– MattYao, Commented Mar 17, 2017 at 3:00

hazardous · Accepted Answer · 2017-03-17 06:11:44Z

1

The d3.select method requires a dom element. In the class method, this points to the React Component's instance, not the corresponding element. You should use a ref to first get the linked dom element and then pass it into the select method.

answered Mar 17, 2017 at 6:11

hazardous

10.8k2 gold badges44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HaseebR7 Over a year ago

yep, this was the issue. i just moved the animateFirstStep and animateSecondStep to another file and called them inside the React Component and it worked.

Collectives™ on Stack Overflow

React component function cannot call another function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related