在d3js中从一个梯度过渡到另一个梯度

Question

在我的图表中，我有一个带渐变的矩形

    barG.enter().append("rect")
          .attr("id", "my_rectangle")
          .attr("x", 0)
          .attr("y", 50)
          .attr("height", barHeight - 1)
          .attr("width", rectWidth)
          .attr("fill", rectColor);

取决于数据，函数rectColor返回一个渐变

function rectColor(d) {
    //set bar color 
    if (d.value <= d.limit) {
        return "url(#gradientRed)";
    } else {
        return "url(#gradientDefault)";
    }
}
;

渐变看起来像这样

    var gradientDefault = defs
            .append("linearGradient")
            .attr("id", "gradientDefault")
            .attr("x1", "0%")
            .attr("x2", "0%")
            .attr("y1", "0%")
            .attr("y2", "100%")
            .attr("spreadMethod", "pad");

    gradientDefault.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", defaultStyle.backgroundColor)
            .attr("stop-opacity", 1);

    gradientDefault.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", defaultStyle.secondaryBackgroundColor)
            .attr("stop-opacity", 1);

如何从一个渐变转换到另一个渐变？

我试过了

    // animation rectangle/bar
    rect.transition()
          .duration(1000)
          .attr("fill", rectColor);

但它不起作用......

这是jsfiddle-code。数据将动态加载。