d3区域上的剪辑路径在React.js中不起作用

Question

我在反应中的图表组件中有以下内容：

constructor(props) {
    super(props);       

    this.state = {
        activeIndex: 9
    };

    this.margin = {
        top: 10,
        bottom: 15,
        h: 5
    }

    this.columnLines = [0,1,2,3,4,5,6,7,8,9,10,11];
    this.rowLines = [0,1,2,3,4,5,6,7,8];

    this.declareGraphFunctions();
}

declareGraphFunctions() {
    this.x = d3.scaleLinear() 
        .range([0,this.props.width-(2*this.margin.h)]) 
        .domain(d3.extent(this.props.data, (dataPoint, index) => index))
        .bind(this);

    this.yScaled = d3.scaleLinear()
        .range([this.props.height*6.5/8-(this.margin.bottom), 0])
        .domain(d3.extent(this.props.data, (dataPoint) => dataPoint.amount))
        .bind(this);

    this.displacementY = d3.scaleLinear()
        .range([this.props.height-(this.margin.bottom), 0])
        .domain(d3.extent(this.props.data, (dataPoint) => dataPoint.amount))(0) - this.yScaled(0);

    this.y = ((value) => this.yScaled(value) + this.displacementY).bind(this);

    this.line = d3.line()
        .x((dataPoint,index) => this.x(index))
        .y((dataPoint) => this.y(dataPoint.amount))
        .curve(d3.curveMonotoneX)
        .bind(this);

    this.area = d3.area()
        .x((dataPoint, index) => this.x(index))
        .y0(this.props.height-this.margin.bottom)
        .y1((dataPoint) => this.y(dataPoint.amount))
        .curve(d3.curveMonotoneX)
        .bind(this);
}

componentWillReceiveProps () {
    this.declareGraphFunctions();
}

渲染函数的一部分：

render() {
    return (
        <svg key={`graphsvg${this.props.width}${this.props.height}${this.state.activeIndex}`} width={this.props.width} height={this.props.height} onMouseMove={this.handleHover.bind(this)}>
            <g transform={`translate(${this.margin.h},${this.margin.top})`}>
                <defs>
                    <clipPath id="clip">
                        <rect x="0" y="0" width={this.x(this.state.activeIndex)} height={this.props.height}/>
                    </clipPath>
                </defs>

                <path className="graph-area" d={this.area(this.props.data)} clipPath="url(#clip)"/>
            </g>
        </svg>);
}

其余的图形函数渲染得很好，我已经检查过裁剪矩形的大小并根据组件道具正确调整大小。但问题是剪裁不适用于图形区域。为什么是这样？