[Solved]-Confuse about the overlap and collision between React and D3-Reactjs

class Line extends React.Component {
    static contextTypes = {
        xScale: React.PropTypes.func,
        yScale: React.PropTypes.func
    };

    render() {
        let path = d3.svg.line()
                         .interpolate("linear")
                         .x(d => this.context.xScale(d.x))
                         .y(d => this.context.yScale(d.y));

        return (
            <path d={path(this.props.data)}
                  stroke="#0077CC"
                  strokeWidth="3"
                  fill="none" />
        );
    }
}

class Chart extends React.Component {
    static propTypes = {
        width: React.PropTypes.number,
        height: React.PropTypes.number,
        data: React.PropTypes.shape({
            x: React.PropTypes.number.isRequired,
            y: React.PropTypes.number.isRequired
        }).isRequired
    };

    static defaultProps = {
        width: 400,
        height: 200
    };

    static childContextTypes = {
        xScale: React.PropTypes.func,
        yScale: React.PropTypes.func
    };

    getChildContext() {
        return {
            xScale: this.getXScale(),
            yScale: this.getYScale()
        }
    }

    getXScale() {
        return d3.scale.linear()
                 .domain(d3.extent(this.props.data, d => d.x))
                 .range([0, this.props.width]);
    }

    getYScale() {
        return d3.scale.linear()
                 .domain(d3.extent(this.props.data, d => d.y))
                 .range([this.props.height, 0]);
    }

    render() {
        return (
            <svg style={{ width: this.props.width, height: this.props.height }}>
                <Line data={this.props.data} />
            </svg>
        );
    }
}