Question

我正在尝试在React应用程序中使用d3.js.

this.animateFirstStep在componentDidMount中被调用，但在animateFirstStep中，this.animateSecondStep永远不会被调用。

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)

这个不被称为

            .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");})

这被称为罚款

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

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

Answer 1

d3.select方法需要dom元素。在类方法中，this指向React Component的实例，而不是相应的元素。您应该使用ref首先获取链接的dom元素，然后将其传递给select方法。

React组件函数不能调用另一个函数

1 个答案: